[js] Array.prototype.reduce() 뜯어보기

자바스크립트의 Array.prototype.reduce()는 배열의 각 값에 대해 순차적으로 함수를 실행시켜준다.

1. 배열의 값을 하나씩 넘겨주며 함수를 실행

기본적으로 reduce()는 다음처럼 배열의 각 값에 대해 함수를 실행해준다.

const arr = [1, 2, 3, 4, 5, 6]

arr.reduce((accumulator, current) => {
  // 현재 값을 출력
  console.log(current)
}, 0)

1
2
3
4
5
6

2. 이전 값의 함수로부터 값을 넘겨받음

이때, 배열의 각 값마다 실행되는 함수는 이전 값의 함수로부터 값을 넘겨받을 수 있다.

함수에서 return으로 값을 넘겨주면, 다음 값의 함수에서 파라미터로 그 값을 받을 수 있다.

const arr = [1, 2, 3, 4, 5, 6]

arr.reduce((accumulator, current) => {
  // 넘겨받은 값을 출력
  console.log(accumulator)

  // 현재 값을 넘겨준다
  return current
}, 0)

0
1
2
3
4
5

위처럼 첫 번째 파라미터에서 그 값을 넘겨받을 수 있다.

출력 값을 보면 알 수 있듯이, 첫 번째 값에 대한 함수는 reduce()의 두 번째 파라미터에서 받은 값(여기서 0)을 넘겨준다.

결론적으로 정리해보면 다음과 같다.

• 함수는 배열의 각 값마다 한 번씩 실행된다.
• 함수는 이전 값의 함수로부터 값을 넘겨받는다.

이전 값과 현재 값을 더한다면

따라서 다음 단계로 생각해볼 수 있는 게, 넘겨받은 값과 현재 값을 더해서 넘겨주는거다.

const arr = [1, 2, 3, 4, 5, 6]
console.log("넘겨받은 값 + 현재 값 = 넘겨줄 값")

arr.reduce((accumulator, current) => {
  // 넘겨받은 값과 현재 값을 더한다
  const added = accumulator + current

  // 콘솔에 출력하고, 다음 함수로 넘겨준다
  console.log(`${accumulator} + ${current} = ${added}`)
  return added
}, 0)

넘겨받은 값 + 현재 값 = 넘겨줄 값
0 + 1 = 1
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10
10 + 5 = 15
15 + 6 = 21

두 값을 더하는 게 배열의 각 값과 넘겨받은 값을 파라미터로 갖는 함수가 할 수 있는 가장 기본적인 기능이고, 또 이 용도로 가장 많이 사용되기 때문에,

파라미터 이름도 누산한다는 뜻으로 accumulator라고 기본적으로 부르는 듯하다.

reduce() 메서드는 마지막 값에 대한 함수의 리턴값을 돌려주는데, 이 사실을 이용하고 위 코드를 조금 더 단순화 시켜보면 다음과 같다 :

const arr = [1, 2, 3, 4, 5, 6]

const sum = arr.reduce((accumulator, current) => {
  return accumulator + current
}, 0)

console.log(sum)

21

참고

위 모든 예시에서는 reduce()의 두 번째 파라미터에 0을 줬다.

reduce() 두 번째 파라미터에 값을 주지 않으면, 첫 함수에 배열의 첫 번째 값을 넘겨주면서 배열의 두 번째 값부터 함수가 실행된다.

즉, 두 번째 파라미터에 값을 안주면, 배열의 모든 값에 대해 함수를 실행하는 게 아니다.

// reduce()의 두 번째 파라미터에 값을 주지 않는다면
const arr = [1, 2, 3, 4, 5, 6]
console.log("넘겨받은 값 + 현재 값 = 넘겨줄 값")

const sum = arr.reduce((accumulator, current) => {
  const added = accumulator + current

  console.log(`${accumulator} + ${current} = ${added}`)
  return added
})

console.log(sum)

넘겨받은 값 + 현재 값 = 넘겨줄 값
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10
10 + 5 = 15
15 + 6 = 21
21

두 번째 파라미터에 값을 안주면 배열의 첫 번째 값에 대해 함수는 실행되지 않지만, 합은 올바르게 계산된다.

결론적으로

• 단순히 합을 구하려면 reduce()의 두 번째 파라미터에 값을 안줘도 결과는 똑같다.
• 배열의 모든 값에 대해 함수를 실행하려면, 두 번째 파라미터에 값을 줘야 한다.

참고 링크

• Array.prototype.reduce() (MDN)