1. reduce

reduce method의 콜백 함수는 기본적으로 다음과 같이 구성되어 있다.

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

numbers.reduce((acc, el, i, arr) => {
  return nextAccValue;
}, initialAccValue);

두 번째 파라미터로는 배열의 요소가 전달되고, 세 번째 파라미터로는 그 요소의 인덱스가 전달되며, 마지막 파라미터로는 method를 호출한 배열이 전달된다.

첫 번째 파라미터는 영어로는 Accumulator라고 하며, 한국어로는 누산기라고 표현한다.

이는 직전에 동작한 콜백 함수라 리턴한 값을 전달 받는 파라미터이다.

결국, 마지막에 실행되는 콜백 함수의 리턴값이 이 reduce method의 최종 리턴값이 되는 것이다.

여기서 의문점이 하나 발생하게 되는데, 그렇다면 처음 실행할 때는 첫 번째 파라미터로 어떤 값을 전달받는 것일까?

위 코드를 보면 리턴문 뒤에 initialAccValue가 있는데, 첫 실행 시에는 이 값을 acc로 넘겨주게 된다.

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

const sumAll = numbers.reduce((acc, el, i) => {
  console.log(`${i}번 index의 요소로 콜백함수가 동작중입니다.`);
  console.log('acc:', acc);
  console.log('el:', el);
  console.log('____________');

  return acc + el;
}, 0);

console.log('sumAll:', sumAll);
.
.
.
>>> 0번 index의 요소로 콜백함수가 동작중입니다.
    acc: 0
    el: 1
    ____________
    1번 index의 요소로 콜백함수가 동작중입니다.
    acc: 1
    el: 2
    ____________
    2번 index의 요소로 콜백함수가 동작중입니다.
    acc: 3
    el: 3
    ____________
    3번 index의 요소로 콜백함수가 동작중입니다.
    acc: 6
    el: 4
    ____________
    sumAll: 10

reduce method의 두 번째 argumet는 선택 사항으로, 이 값을 작성해 줄 경우, 가장 처음에 동작하는 콜백 함수의 accumulator로 전달되지만, 생략을 하더라도 에러가 발생하지 않고, 배열의 0번 index에 있는 요소 값이 첫 번째 실행되는 콜백 함수의 accumulator로 전달되어서 결과값이 동일하게 실행된다.

다만, 주의해야 하는 부분은, 이 경우, 처음 시작되는 요소의 index가 0번이 아닌 1번이라는 점이다.

💡 reduce mehtod를 사용할 때는, 가급적 두 번째 argument도 작성하자.