요약

초기값을 설정하지 않으면 첫 번째 요소에는 콜백 함수가 실행되지 않는다.

reduce란?

[0, 1, 2, 3, 4].reduce(
  function (accumulator, currentValue, currentIndex, array) {
    return accumulator + currentValue;
  },
);

const array = [1, 2, 3, 4];

// 화살표 함수 사용
const sum = array.reduce(
  (accumulator, currentValue, currentIndex, array) => accumulator + currentValue,
  initialValue
);

let array = [0, 1, 2, 3];

// 함수 표현식 사용
const sum = array.reduce(function (accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}, initialValue);

배열의 요소를 순회하며 로직이 실행되고 하나의 결과 값(accumulator)을 반환한다.

accumulator

• 콜백의 반환 값에 대한 누산 값
• 초기값이 없으면 배열의 첫 번째 요소를 자동 적용한다.

currentValue

• 접근한 현재의 요소

currentIndex

• 접근한 현재 요소의 인덱스
• 생략 가능

array

• reduce()를 호출한 배열
• 생략 가능

initialValue

• 콜백 함수의 첫 번째 요소에 제공되는 accumulator 위치에 들어가는 값
• 빈 배열에 초기값이 없으면 에러가 발생한다.

생략할 경우 첫 번째 요소가 초기값으로 자동 설정되고 콜백 함수는 건너뛴다. 콜백 함수는 두 번째 요소부터 적용된다.

초기값이 있을 때와 없을 때

의도: 모든 요소에 +1을 하고 그 값을 전부 더하고 싶다.

const array = [1, 2, 3, 4];

const result = array.reduce(
  (accumulator, currentValue) => accumulator + currentValue + 1,
  0 // 초기값으로 0을 설정
);

console.log(result);

이 코드의 진행 과정:

• 초기 상태: accumulator의 초기값은 0
• 1번째 호출: accumulator는 0, currentValue는 1이다. 계산 후, (0 + 1 + 1) = 2가 된다.
• 2번째 호출: accumulator는 이전의 결과값 2, currentValue는 2이다. 계산 후, (2 + 2 + 1) = 5가 된다.
• 3번째 호출: accumulator는 5, currentValue는 3이다. 계산 후, (5 + 3 + 1) = 9가 된다.
• 4번째 호출: accumulator는 9, currentValue는 4이다. 계산 후, (9 + 4 + 1) = 14가 된다.
• 최종 결과값은 14

const array = [1, 2, 3, 4];

const result = array.reduce(
  (accumulator, currentValue) => accumulator + currentValue + 1
  // 초기값을 제공하지 않음
);

console.log(result);

진행 과정:

• 초기 상태: accumulator의 초기값은 배열의 첫 번째 요소인 1이다.
• 1번째 호출: accumulator는 1, currentValue는 2입니다 (첫 번째 요소가 이미 accumulator로 사용되었기 때문에 두 번째 요소부터 시작). 계산 후, (1 + 2 + 1) = 4가 된다.
• 2번째 호출: accumulator는 이전의 결과값 4, currentValue는 3이다. 계산 후, (4 + 3 + 1) = 8이 된다.
• 3번째 호출: accumulator는 8, currentValue는 4이다. 계산 후, (8 + 4 + 1) = 13이 된다.
• 최종 결과값은 13

초기값이 없을 경우, reduce 메서드는 배열의 첫 번째 요소를 accumulator의 초기값으로 사용하고, 두 번째 요소부터 연산을 시작한다
초기값이 없으므로, 최종 결과에서 한 번의 1이 덜 더해져 결과적으로 13이 된다.

요약

초기값을 설정하지 않으면 첫 번째 요소에는 콜백 함수가 실행되지 않는다.

참고자료: MDN