오늘은 javascript의 배열 관련 내장함수인 map과 reduce에 대해 알아보겠습니다.

map

map 메소드는 다음과 같이 사용합니다.

Array.map((요소,인덱스,배열) => { return 요소 });

map의 기본원리는 간단합니다. 반복문을 돌면서 안에 있는 요소들을 1:1로 짝지어 줍니다.

예를 들어보겠습니다.

const arr = [1,2,3];
let result = arr.map((v) => {
    console.log(v); //1, 2, 3
    return v;
})

result === arr //false

반복문으로 요소를 순회하면서 각 요소를 어떻게 짝지어줄지 알려줍니다. 함수가 그냥 return v를 하기때문에 같은 값을 그대로 짝을 짓습니다. 중요한 점은 기존의 배열을 수정하지 않고 새로운 배열을 만들어 냅니다. 단, 배열 안에 객체가 들어있는 경우엔 객체를 공유합니다.

정리하자면 map은 배열을 1:1로 짝을 짓지만 기존 객체를 수정하지 않는 메서드 입니다.

reduce

reduce는 다음과 같이 사용합니다.

Array.reduce((누적값,현잿값,인덱스,요소) => { return 결과 },초깃값);

이전값이 아닌 누적값입니다. 이를 활용하여 예시를 만들어 보겠습니다.

result = arr.reduce((acc,cur,i) => {
    console.log(acc, cur, i);
    return acc + cur;
},0);

// 0 1 0
// 1 2 1
// 3 3 2

result; // 6

누적값(acc)이 초깃값인 0부터 시작해서 return하는대로 누적되는 것을 볼 수 있습니다. 초깃값을 적어주지 않으면 자동으로 초깃값이 0번째 인덱스의 값이 됩니다.