reduce() 메서드는 왼쪽에서 오른쪽으로 이동하며 배열의 각 요소마다 누적 계산값과 함께 함수를 적용해 하나의 값으로 줄입니다.

구문

arr.reduce(callback[, initialValue])

매개변수

callback
배열의 각 (요소) 값에 실행할 함수. 인수(argument) 4개를 취하며, 각 인수는 다음과 같습니다 :
accumulator
누적 계산값은 콜백의 반환값을 누적합니다. initialValue (주어진 경우) 또는 직전의 콜백 호출이 반환한 누적 계산값입니다. (아래 참조.)
currentValue
배열 내 현재 처리되고 있는 요소(element).
currentIndex
배열 내 현재 처리되고 있는 요소의 인덱스. initialValue가 주어진 경우 0부터, 그렇지 않으면 1부터 시작합니다.
array
reduce가 호출된 배열.
initialValue
선택사항. callback의 첫 호출에 첫 번째 인수로 사용하는 값.

설명

reduce는 배열에 있는 구멍(빈 값)은 제외한 각 요소에 대해 callback 함수를 한 번 실행하는데, 이 함수는 다음의 네 인수를 받게 됩니다:

  • accumulator
  • currentValue
  • currentIndex
  • array

콜백이 처음으로 호출될 때, accumulator와 currentValue는 두 가지 값 중 하나를 가질 수 있습니다. 만약 initialValue가 주어진 경우, accumulatorinitialValue와 같고 currentValue는 배열의 첫 번째 값과 같습니다.  만약initialValue가 주어지지 않은 경우, accumulator는 배열의 첫 번째 값과 같고 currentValue는 두 번째와 같습니다.

참고: initialValue가 주어지면, 콜백 함수는 인덱스 0에서 시작하며, initialValue가 주어지지 않은 경우, 인덱스 1에서 시작합니다.

빈 배열에 initialValue가 제공되지 않은 경우, TypeError가 발생됩니다. 배열이 요소가 (위치와 관계없이) 하나 뿐이고 initialValue가 제공되지 않은 경우 또는 initialValue는 제공됐으나 배열이 빈 경우, 그 단독 값이 callback 호출 없이 반환됩니다.

보통 초기값을 주는 편이 안전합니다. 다음의 예제에서처럼, initialValue를 제공하지 않은 때에는 결과값의 형태가 일정하지 않을 수 있습니다.

var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x );
var maxCallback2 = ( max, cur ) => Math.max( max, cur );

// reduce() without initialValue
[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42
[ { x: 22 }            ].reduce( maxCallback ); // { x: 22 }
[                      ].reduce( maxCallback ); // TypeError

// map/reduce; better solution, also works for empty arrays
[ { x: 22 }, { x: 42 } ].map( el => el.x )
                        .reduce( maxCallback2, -Infinity );

reduce 동작 설명

다음의 예제를 생각해 봅시다.

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});

콜백은 4번 호출됩니다. 각 호출의 인수와 반환값은 다음과 같습니다.

  accumulator currentValue currentIndex array 반환값
1번째 호출 0 1 1 [0, 1, 2, 3, 4] 1
2번째 호출 1 2 2 [0, 1, 2, 3, 4] 3
3번째 호출 3 3 3 [0, 1, 2, 3, 4] 6
4번째 호출 6 4 4 [0, 1, 2, 3, 4] 10

reduce에 의해 반환되는 값은 마지막 콜백 호출의 반환값 (10)이 됩니다.

완전한 함수 대신에 화살표 함수를 제공할 수도 있습니다. 아래 코드는 위 블록 내 코드와 같은 출력을 냅니다:

[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr );

reduce의 두 번째 인수로 초기값을 제공하는 경우, 결과는 다음과 같습니다:

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}, 10);
  accumulator currentValue currentIndex array 반환값
1번째 호출 10 0 0 [0, 1, 2, 3, 4] 10
2번째 호출 10 1 1 [0, 1, 2, 3, 4] 11
3번째 호출 11 2 2 [0, 1, 2, 3, 4] 13
4번째 호출 13 3 3 [0, 1, 2, 3, 4] 16
5번째 호출 16 4 4 [0, 1, 2, 3, 4] 20

reduce가 결과로 반환된 값은 이 경우 20이 됩니다.

배열의 값 모두 더하기

var total = [0, 1, 2, 3].reduce(function(a, b) {
  return a + b;
});
// total == 6

배열의 배열(2차원 배열) 1차원으로 내리기

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
  return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]

폴리필

Array.prototype.reduce는 ECMA-262 표준 제5판에 추가되었습니다; 그러하기에 표준의 모든 구현에 없을 수 있습니다. 원래 지원하지 않는 구현에서, 스크립트 시작 부분에 다음 코드를 삽입하여 이를 우회해 reduce를 사용할 수 있습니다.

// ECMA-262 5판, 15.4.4.21항의 작성 과정
// 참고: http://es5.github.io/#x15.4.4.21
if (!Array.prototype.reduce) {
  Array.prototype.reduce = function(callback /*, initialValue*/) {
    'use strict';
    if (this == null) {
      throw new TypeError('Array.prototype.reduce called on null or undefined');
    }
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }
    var t = Object(this), len = t.length >>> 0, k = 0, value;
    if (arguments.length == 2) {
      value = arguments[1];
    } else {
      while (k < len && !(k in t)) {
        k++;
      }
      if (k >= len) {
        throw new TypeError('Reduce of empty array with no initial value');
      }
      value = t[k++];
    }
    for (; k < len; k++) {
      if (k in t) {
        value = callback(value, t[k], k, t);
      }
    }
    return value;
  };
}

스펙

스펙 상태 설명
ECMAScript 5.1 (ECMA-262)
The definition of 'Array.prototype.reduce' in that specification.
Standard 초기 정의. JavaScript 1.8에서 구현됨.
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Array.prototype.reduce' in that specification.
Standard  
ECMAScript Latest Draft (ECMA-262)
The definition of 'Array.prototype.reduce' in that specification.
Living Standard  

브라우저 호환성

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 3.0 (1.9) 9 10.5 4.0
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

참조

문서 태그 및 공헌자

 이 페이지의 공헌자: ieay4a, Violetdusk, Netaras, preco21
 최종 변경: ieay4a,