요약
reduce() 메서드는 왼쪽에서 오른쪽으로 이동하며 배열의 각 요소마다 누적 계산값과 함께 함수를 적용해 하나의 값으로 줄입니다.
문법(Syntax)
arr.reduce(callback[, initialValue])
매개변수
callback- 배열의 각 (요소) 값에 실행할 함수. 인수(argument) 4개를 취하며, 각 인수는 다음과 같습니다 :
accumulator- 누적 계산값은 콜백의 반환값을 누적합니다.
initialValue(주어진 경우) 또는 직전의 콜백 호출이 반환한 누적 계산값입니다. (아래 참조.) currentValue- 배열 내 현재 처리되고 있는 요소(element).
currentIndex- 배열 내 현재 처리되고 있는 요소의 인덱스.
initialValue가 주어진 경우 0부터, 그렇지 않으면 1부터 시작합니다. arrayreduce가 호출된 배열.
initialValue- 선택사항.
callback의 첫 호출에 첫 번째 인수로 사용하는 값.
반환 값
누적 계산의 결과를 반환 합니다.
설명
reduce는 배열에 있는 구멍(빈 값)은 제외한 각 요소에 대해 callback 함수를 한 번 실행하는데, 이 함수는 다음의 네 인수를 받게 됩니다:
accumulatorcurrentValuecurrentIndexarray
콜백이 처음으로 호출될 때, 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;
};
}명세
브라우저 호환성
같이 보기
'C Lang > JS Technic' 카테고리의 다른 글
| pm2 설정파일을 통한 환경변수로 pm2 start (0) | 2018.07.25 |
|---|---|
| Object.assign, 복사 대상과 참조가 연결되는 얕은 복사(shallow copy), 아예 새로운 객체를 복사하는 깊은 복사(deep copy) (0) | 2018.07.24 |
| 이미지, 파일 송신에 특화된 모듈 : formidable (0) | 2018.07.23 |
| promise의 책 (0) | 2018.06.30 |
| yield, generator,next() (0) | 2018.06.30 |
