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.
Draft  

브라우저 호환성

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,