Javascript reduce() 메서드

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

 

 

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

// 0 + 1 + 2 + 3 + 4

const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);

console.log(sumWithInitial);

// expected output: 10

 

 

initialValue 를 선언하지 않으면 초기값은 0이다.

만약 initialValue 를 10으로 선언했다면 output 은 20이 된다. 10 + 1 + 2 + 3 + 4

 

리듀서 함수는 네 개의 인자를 가진다.

 

1. 누산기 (acc)
2. 현재 값 (cur)
3. 현재 인덱스 (idx)
4. 원본 배열 (src)

리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다.

 

구문

arr. reduce(callback[, initialValue])

 

callback: 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받는다.

• accumulator: 누산기는 콜백의 반환값을 누적. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값.
• currentValue: 처리할 현재 요소.
• currentIndex(Optional): 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작한다.(제공 안 했을 때는 accumulator가 첫 번째 인덱스의 요소이기 때문)
• array(Optional): reduce()를 호출한 배열.

 

 

반환 값: 누적 계산의 결과 값.

 

 

콜백의 최초 호출 때 accumulator와 currentValue는 다음 두 가지 값 중 하나를 가질 수 있다. 

 

만약 reduce() 함수 호출에서 initialValue를 제공한 경우, 

 

accumulator는 initialValue와 같고 

currentValue는 배열의 첫 번째 값과 같다. 

 

initialValue를 제공하지 않았다면, 

 

accumulator는 배열의 첫 번째 값과 같고 

currentValue는 두 번째와 같다.

 

 

배열이 비어있는데 initialValue도 제공하지 않으면 TypeError 가 발생한다. 

배열의 요소가 (위치와 관계없이) 하나 뿐이면서, initialValue를 제공하지 않은 경우, 

또는 initialValue는 주어졌으나 배열이 빈 경우엔 그 ‘단독 값’을 callback 호출 없이 반환합니다.

그러므로 초기값을 주는 것이 여러모로 안전하다.

 

 

 

객체 배열에서의 값 합산

 

객체로 이루어진 배열에 들어 있는 값을 합산하기 위해서는 반드시 초기값을 줘서 각 항목이 함수를 거치도록 해야한다.

 

 

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
    return accumulator + currentValue.x; // 어차피 acc는 0에서 cur.x 만 쌓이니까 .x 안 붙여도 됨
},initialValue)

console.log(sum) // logs 6


// 화살표 함수

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(
    (accumulator, currentValue) => accumulator + currentValue.x
    ,initialValue
);

console.log(sum) // logs 6

 

 

중첩 배열 펼치기

 

 

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(accumulator, currentValue) {
    return accumulator.concat(currentValue);
  },
  []
);
// 펼친 결과: [0, 1, 2, 3, 4, 5]

// 화살표 함수

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  ( accumulator, currentValue ) => accumulator.concat(currentValue),
  []
);

 

객체 내의 값 인스턴스 개수 세기, 속성으로 객체 분류하기, 배열의 중복 항목 제거 등

다른 유용한 기능들도 reduce() 메서드를 활용해서 만들 수 있다.

 

나머지 기능은 아래의 페이지를 참고!

 

 

Array.prototype.reduce() - JavaScript | MDN