반응형
map
map 메서드는 반복을 통해 item을 하나씩 매핑한다.
매핑(mapping)은 하나의 값을 다른값과 1:1 대응시키는것이다.(해당 값이 다른값을 가리키도록 하는것이다.)
배열의 아이템을 1:1로 대응시키지만, 원본을 변경시키지 않고 새로운 배열을 리턴한다.
array.map((item,index,array)=>{return item})
const originArray = [1,2,3,4];
const newArray = originArray.map((item)=> item + 1)
console.log('originArray::', originArray); // [1,2,3,4]
console.log('newArray::', newArray); // [2,3,4,5]
reduce
배열의 각 요소에 대해 callback함수를 한번씩 실행하는데, callback함수 인자로 (누적값, 현재값, 인덱스, 배열)을 인자로 받는다. 초기값을 제공하지않으면 배열의 첫번째 요소를 사용하고, 빈 배열에 초기값없이 reduce메서드를 호출하면 에러를 뿜는다.
array.reduce((acc,cur,i,array)=> acc, initial)
const originArray = [2022,'루미',8,'시간'];
const stringArray = originArray.reduce((acc, cur, i) => {
if(typeof cur === 'string') acc.push(cur); // 현재값의 타입이 문자열이면 누적값에 현재값을 푸시
return acc;
},[]) //초기값은 빈배열
console.log('stringArray::', stringArray); //['루미','시간']
✧ typeof null === 'object'
✧ reduce는 많은 메서드를 대체할 수 있다.
반응형
'[IT] 프로덕트 개발 > Javascript - 자바스크립트' 카테고리의 다른 글
[Javascript] 특정 요소 찾기 find, findIndex, filter (4) | 2022.09.02 |
---|---|
[Javascript] 자주쓰는 JS 메서드 정리하기 (2) | 2022.08.31 |
[Javascript ] 깊은복사와 얕은복사, 그리고 원시형 참조형 데이터 (0) | 2022.05.31 |
[Javascript] Nullish coalescing operator / 널리쉬 병합 논리 연산자 (2) | 2022.05.21 |
[Javascript] for, forEach, for in, for of, map으로 반복 수행하기 (2) | 2022.05.01 |