map과 reduce의 차이점

forEach map reduce는 모두 배열에서만 사용 가능하며 for문을 돌린다는 공통점을 가진다. 차이점은 목적에 있다.

차이점

1. forEach for문을 간편하게 돌린다.
2. map for문을 돌려서 새로운 배열을 만든다.
3. reduce for문을 돌려서 최종적으로 다른 무언가를 만든다.
   
   

이렇게 reduce로 갈수록 하위 개념이며 좁은(명확한) 목적을 가지게 된다.
특히 map과 reduce는 새로운 배열 혹은 무언가를 만드는 목적이 있기 때문에 함수 내에 return을 필수로 가진다.

---

map

console
value는 a가 순차적으로 출력된 1, 2, 3
i는 인덱스 순서대로 0, 1, 2
arr는 a 자체를 뜻하므로 [ 1, 2, 3 ]
this는 [10]이다.

return값
this인 10에 value값을 더해 [ 11, 12, 13 ]이 출력된다.

reduce

배열.reduce((누적값, 현재값, 인덱스, 요소) => {return 결과}, 초기값)
배열.reduce(function(누적값, 현재값, 인덱스, 요소){return 결과}, 초기값)

reduce는 누적값이라는 개념이 있다. 누적값의 시작값은 초기값이다. 만약 초기값을 5으로 두면 누적값 역시 5로 시작하게 된다.

console
acc는 누적값 10부터 시작하여 현재값을 더한 값으로 누적된다. 때문에 첫 번째 누적값은 10이고, 두 번째 누적값은 10에 현재값 1을 더한 11, 세 번째 누적값은 11에 현재값 2를 더한 13이 된다.
cur은 배열에 들어 있는 현재값 1, 2, 3이다.
i는 인덱스 0, 1, 2이다.

이렇게 reduce는 누적값에 현재값을 더한 값이 다음 누적값으로 누적된다.

return값
acc인 13에 cur 3이 더해져서 16이 출력된다.

그런데 초기값은 필수값이 아니다.
초기값을 지정하지 않을 때는 아래 코드처럼 동작한다.

console
초기값이 없으면 0번째 인덱스의 값이 초기값으로 지정된다. 0번째 인덱스 값은 1이므로 첫번째 누적값 역시 1이다. 이후 누적되는 과정은 위와 동일하다.