JavaScript reduce( ) 함수

 

 

reduce( ) 함수

: 배열의 각 요소를 순회하며 callback 함수의 실행 값을 누적해 하나의 결과값을 반환

 

 

Syntax

arr.reduce(callback[, initialValue])

 

Parameter

1. callback function

  : 배열의 각 요소에 대해 실행할 함수. 다음 4가지의 인수를 가짐

    ˙ accumulator

        : callback 함수의 반환값 누적.

          콜백의 이전 반환값 / 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우 => initialValue의 값

    ˙ currentValue

        : 배열의 현재 요소

    ˙ index (Optional)

        : 배열의 현재 요소의 인덱스

    ˙ array (Optional)

        : reduce()를 호출한 배열

 

2. initialValue (Optional)

  : 최초 callback 함수 실행 시 accumulator 인수에 제공되는 값.

    초기값을 제공하지 않을 경우 배열의 첫 번째 요소를 사용, 배열에서 초기값 없이 reduce()를 호출하면 오류 발생

 

 

반환 값

배열을 순서대로 불러 각 요소에 대해 callback 함수를 실행한 결과를 누적한 값

 

 

예제

예제 1) 초기 값 제공하지 않는 경우

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

//화살표 함수 (위 코드와 동일한 결과 반환)
[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr );

callback	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)

 

예제 2) 두 번째 인수로 초기 값 제공하는 경우

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

callback	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)

 

예제 3) 원하는 항목의 값만 더하기

const fruits = [
    {
    	name : 'mango',
        num : 2,
        color : 'yellow'
    },
    {
    	name : 'podo',
        num : 5,
        color : 'purple'
    },
    {
    	name : 'apple',
        num : 3,
        color : 'red',
    }
];

//과일 갯수 더하기
//초기 값 설정 필수
const fruitsSum = fruits.reduce((accumulator, currentObject) => {
    return accumulator + currentObject.num;
}, 0);

console.log('과일 갯수 : ' + fruitsSum);    //10

 

 

주의할 점!

• initialValue가 없으면 배열의 2번째부터 계산이 되기 때문에 배열이 비어있으면 => TypeError
• 배열의 요소가 하나 뿐이면서 initialValue가 없는 경우, 또는 initialValue가 주어졌으나 배열이 비어 있는 경우에는 계산할 필요가 없기 때문에 callback 호출 없이 그대로 반환

 

 

 

 

 

 

 

 

※ 출처

1. https://tocomo.tistory.com/26

JavaScript - 배열 reduce() 사용법 및 예제

2. developer.mozilla.org

Array.prototype.reduce() - JavaScript | MDN