SPACE RUMI

Hi, I am rumi. Let's Splattack!

[IT] 프로덕트 개발/Javascript - 자바스크립트

[Javascript] map 메서드 그리고 reduce

백루미 2022. 8. 31. 22:48
반응형

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는 많은 메서드를 대체할 수 있다.

 

반응형