Reduce
reduce 메서드는 배열의 각 요소에 대하여 callback 함수를 실행 시키고 결과적으로 하나의 값을 반환한다.
여기서 반환되는 하나의 값은 Number String Array Object 등 다양한 타입이 될 수 있다.
기본 형태
배열.reduce(callback[, initialValue])
arr.reduce(function(accumulator, current_value, index, origin_array) {
// return ...
}, [initial_value])Reduce 메서드는 크게 배열의 각 요소에 대해 실행할 callback 함수와 callback의 최초 호출에서 첫 번째 인수에 제공하는 값 initial value (생략 가능) 으로 이루어져 있다.
또한 callback 함수는 accumulator current value index (생략 가능) origin array (생략 가능) 의 네 가지 인수를 받는다.
매개변수
-
callback
배열의 각 요소에 대해 실행되는 함수accumulaor
실행된 함수의 반환값을 누적current value
현재 배열의 요소index (optional)
배열에서 current value의 위치(index)origin array (optional)
reduce 메서드를 호출한 배열
-
initial value (optional)
첫 번째callback함수 실행시accumulator의 값.
생략 시 배열의 첫 번째 요소origin_array[0]에 콜백 함수를 실행한다.따라서 다음과 같은 경우 에러가 발생한다.
① 빈 배열을initial value없이 reduce 메서드를 호출 한 경우
②initial value없이객체 배열 [{},{}...]에 대하여NumberString등원시 Type을 반환하는 reduce 메서드를 호출 한 경우①의 경우, 배열의 첫 번째 인덱스
origin_array[0]가 존재 하지 않기 때문에TypeError가 발생한다.
②의 경우,Object타입인origin_array[0]에 대하여 콜백 함수를 통해 덧셈 등 연산이 이루어 지기 때문에TypeError가 발생한다.
작동 방식
CASE 1
const array = [1,2,3,4,5];
const result = array.reduce( function (acc, cur, i, arr) {
return acc + cur
})
console.log(result) // 15
| callback 호출 | index | accumulator (누적 값) | current value (현재 값) | 콜백 함수 결과 (return 값) |
|---|---|---|---|---|
| 1회차 | 1 | 1 | 2 | 1 + 2 = 3 |
| 2회차 | 2 | 3 | 3 | 3 + 3 = 6 |
| 3회차 | 3 | 6 | 4 | 6 + 4 = 10 |
| 4회차 | 4 | 10 | 5 | 10 + 5 = 15 |
최종 결과 : 15
해석
initial value를 설정하지 않았으므로array[0]값인1이 1회차의accumulator값으로 들어가고array[1]값인2가current value값으로 들어간다. 그 결과 1 + 2 =3이 첫 번째 콜백 함수 실행 결과로 반환되고4회차까지 진행 후 최종적으로15를 반환한다.
CASE 2
const array = [1,2,3,4,5];
const result = array.reduce( function (acc, cur, i, arr) {
return acc + cur
}, 0)
console.log(result) // 15
| callback 호출 | index | accumulator (누적 값) | current value (현재 값) | 콜백 함수 결과 (return 값) |
|---|---|---|---|---|
| 1회차 | 0 | 0 | 1 | 0 + 1 = 1 |
| 2회차 | 1 | 1 | 2 | 1 + 2 = 3 |
| 3회차 | 2 | 3 | 3 | 3 + 3 = 6 |
| 4회차 | 3 | 6 | 4 | 6 + 4 = 10 |
| 5회차 | 4 | 10 | 5 | 10 + 5 = 15 |
최종 결과 : 15
해석
initial value값인0이 1회차의accumulator값으로 들어가고array[0]값인1이current value값으로 들어간다. 그 결과 0 + 1 =1이 첫 번째 콜백 함수 실행 결과로 반환되고5회차까지 진행 후 최종적으로15를 반환한다.
참조
