JavaScript - reduce( )

코드카타 문제를 풀던 중 reduce 메서드를 접했다.

예전에 한 번 짚고 갔던 내용이었는데 잘 안쓰다보니 기억이 나지 않아 한 번 정리가 필요하겠다는 생각이 들었다.

먼저 아래 코드를 보자.

1. forEach 메서드를 사용하여 배열 요소의 합 구하기

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

let sum = 0;

numbers.forEach(n => {
  sum += n;
})

console.log(sum); // 15 

위 코드는 forEach 메서드를 사용해서 배열 numbers 안의 모든 요소들을 더하여 sum이라는 변수에

저장한 것이다.

그런데 여기서 reduce 메서드를 사용하면 코드가 좀 더 간결해진다. 아래 코드를 보자.

2. reduce 메서드를 사용하여 배열 요소들의 합 구하기

reduce( ) 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환하는 메서드이다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0)

여기서 0은 accumulator의 기본값이다.

그리고 accumulator라는 값은 누적된 값을 의미한다.

다시 reduce 메서드가 작동되는 원리를 차례대로 적어보면,

1. 초기값 0이 accumulator가 됨

2. current: 배열의 첫번째 요소인 1이 됨

3. accumulator의 초기값 0과 current 값 1이 더해져서 accumulator가 1이 됨

4. 그리고 배열의 두번째 요소인 2가 current가 됨

5. 1 + 2 = 3 이고 accumulator: 3, current: 3

6. 3 + 3 = 6 이고 accumulator: 6, current: 4

7. 6 + 4 = 10 이고 accumulator: 10, current: 5

8. 결과 값: 15

3. reduce 메서드를 사용하여 배열 요소들의 평균 구하기

const numbers = [1, 2, 3, 4, 5];
const avg = numbers.reduce((accumulator, current, index, array) => {
  if (index === array.length - 1) { 
    return (accumulator + current) / array.length;
  }
  return accumulator + current;
}, 0);

console.log(avg); // 3

위 코드에서 index는 각 요소들이 몇 번 째 아이템인지 알려준다.

배열 numbers에서 각 요소들의 index는 0, 1, 2, 3, 4 이다.

array는 함수를 실행하고 있는 자기 자신을 가리킨다. 즉, 배열 numbers.

if 문 안의 조건을 해석해보면,

"현재 처리하고 있는 배열 요소가 맨 마지막 요소라면", 즉 "index가 4라면" 이라는 뜻이다.

천천히 reduce 함수의 작동 방식을 따라가보자.

1. accumulator의 초기값은 0, current는 1

2. 조건에 부합하지 않으니 0 + 1 = 1 이 됨

3. accumulator = 1, current = 2, 조건 부합하지 않으므로 1 + 2 = 3 이 됨

4. accumulator = 3, current = 3, 조건 부합하지 않으므로 3 + 3 = 6 이 됨

5. accumulator = 6, current = 4, 조건 부합하지 않으므로 6 + 4 = 10 이 됨

6. accumulator = 10, current = 5, 조건에 부합하므로 10 + 5 = 15 이 됨

7. 15 / 5 = 3 리턴.

Ref.

• reduce() MDN