array.reduce 함수

요약

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

문법(Syntax)

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가 주어진 경우, accumulator는 initialValue와 같고 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]

폴리필(Polyfill)

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!

• Desktop
 
• Mobile

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

같이 보기

• Array.prototype.reduceRight()