자바스크립트 배열의 reduce 함수 이해하기

자바스크립트의 reduce 메소드는 배열을 아예 다른 형식의 데이터로 가공하는 데에 매우 유용한 함수다. 배열의 각 인덱스를 차례대로 돌면서 함수를 실행하고, 그 결과값을 따로 저장해두었다가 다음 인덱스의 결과값과 합치는 것이 reduce 메소드의 핵심이다.

 

아래는 reduce 메소드의 기본적인 구성이다.

array.reduce((종합값, 현재값, 인덱스) => { 함수 }, 시작값);

 

reduce 메소드는 두가지 파라미터를 필요로 한다: 각 인덱스마다 실행할 함수와 시작값이다.

• reduce 메소드가 실행시키는 함수는 지금까지 저장한 종합값, 현재 인덱스에 들어있는 값, 그리고 현재 인덱스 값을 인자로 받는다. 이 함수는 다음 인덱스에서 사용할 종합값을 리턴해야 한다.
• 시작값은 reduce 메소드를 실행했을 때 맨 처음에 사용할 종합값이다. 처음엔 종합값이 따로 존재하지 않기 때문에 보통 0이나 빈 객체로 지정하게 될 것이다.

 

숫자 배열의 합계 구하기

배열에 저장되어 있는 숫자들의 합을 구하려면 각 인덱스의 값을 이전에 계산한 합계에 계속 더해나가면 된다.

const numbers = [1, 2, 3];
numbers.reduce((tot, cur) => tot + cur, 0); // 결과: 6

 

시작값을 0으로 지정하면 첫 인덱스에서는 0 + 1 = 1 을 반환하고, 그 다음엔 1 + 2 = 3, 그리고 마지막으로 3 + 3 = 6 으로 계산된다.

 

통계 구하기

단순히 숫자들의 합을 구하는 것 외에도 reduce 메소드는 그 쓰임새가 다양하다. 배열의 값들로 통계를 낼 때에도 활용할 수 있다.

const ages = [10, 16, 17, 25, 28];

 

위와 같이 사람들의 나이를 저장한 배열에서 미성년자와 성인이 각각 몇명인지를 알고 싶다면, 종합값을 객체 형태로 저장하면 된다. 각 인덱스에서 현재값이 19 미만이면 객체의 teen 키에 카운트를 더하고, 19 이상이면 adult 키에 카운트를 더하도록 한다.

ages.reduce(
  (total, current) => {
    // 19살 미만일 경우 result 객체의 teens 키에 1명 추가
    if (current < 19) {
      total.teens += 1;
    }
    // 19살 이상일 경우 result 객체의 adults 키에 1명 추가
    if (current >= 19) {
      total.adults += 1;
    }
    return total; // 반드시 종합값을 반환해야 다음 인덱스에서 같은 객체를 활용할 수 있다
  },
  { teens: 0, adults: 0 }, // 시작값
);

// 결과: { teens: 3, adults: 2 }