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는 많은 메서드를 대체할 수 있다.
반응형
'[Develop] 개발공부 > FE - 프론트엔드' 카테고리의 다른 글
[Javascript] 특정 요소 찾기 find, findIndex, filter (4) | 2022.09.02 |
---|---|
[Javascript] 자주쓰는 JS 메서드 정리하기 (2) | 2022.08.31 |
[React] Context api 사용해 로딩 구현하기 (0) | 2022.07.03 |
[Next] React 에서 Swiper 사용하기 (0) | 2022.06.22 |
[Next] next 에서 scss 사용하기 및 레이아웃 구조 (0) | 2022.06.20 |