[JavaScript] 배열 reduce() 이해하고 사용하기

reduce() 란?

reduce()는 배열의 각 요소를 순회하면서 주어진 함수를 실행하여 값을 누적해 하나의 결과값으로 반환하는 메서드입니다.

구문

arr.reduce(callback[, initialValue])

callback
콜백함수에는 다음 4가지의 인수를 받을 수 있습니다.

• 누적 값 (accumulator)
• 현재 값 (currentValue)
• 현재 인덱스 (currentIndex)
• 원본 배열 (array)

initialValue
callback함수의 초기값으로, 따로 초기값을 제공하지 않으면 배열의 첫번째 요소를 사용합니다.

예시

쉽게 이해해보면 이런 형태의 구조를 갖는다고 볼 수 있습니다.

배열.reduce((누적값, 현재값) => {
  return 새로운 누적값
}, 초기값)

### 1. 배열의 총 합을 구하는 예제

[1, 2, 3, 4].reduce((acc, cur) => acc + cur, 0)
// 10

작동방식

1번째 실행 => 누적값(acc) : 0, 현재값(cur) : 1
2번째 실행 => 누적값(acc) : 1, 현재값(cur) : 2
3번째 실행 => 누적값(acc) : 3, 현재값(cur) : 3
4번째 실행 => 누적값(acc) : 6, 현재값(cur) : 4
반환값 => 10

2. 배열을 객체로 변환하기

배열을 객체로 변환하는 것도 reduce()로 가능합니다.

["철수", "짱구", "맹구", "훈이", "유리"].reduce((acc, cur, i) => {acc[i] = cur ; return acc }, {})
// {0: '철수', 1: '짱구', 2: '맹구', 3: '훈이', 4: '유리'}

작동방식
1번째 실행 => 누적값(acc) : {}, 현재값(cur) : "철수", 인덱스(i) : 0,
2번째 실행 => 누적값(acc) : { 0: "철수" }, 현재값(cur) : "짱구", 인덱스(i) : 1,
3번째 실행 => 누적값(acc) : { 0: "철수", 1: "짱구" }, 현재값(cur) : "맹구", 인덱스(i) : 2,
4번째 실행 => 누적값(acc) : { 0: "철수", 1: "짱구", 2: "맹구" }, 현재값(cur) : "훈이", 인덱스(i) : 3,
5번째 실행 => 누적값(acc) : { 0: "철수", 1: "짱구", 2: "맹구", 3: "훈이" }, 현재값(cur) : "유리", 인덱스(i) : 4,
반환값 => { 0: "철수", 1: "짱구", 2: "맹구", 3: "훈이", 4: "유리" }

주의 사항

빈배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.

참고
Array.prototype.reduce() - JavaScript - MDN Web Docs
ZeroCho TV reduce 강의