javascript reduce 함수에 대해 알아보자 자바스크립트 reduce 함수, reduceRight 함수

javascript reduce 함수에 대해 알아보자 자바스크립트 reduce 함수

 

 

자바스크립트에는 고차함수(High-Order-Function : 다른 함수를 소비 또는 생성하는 함수)가 존재 합니다.

여기에는 filter, reduce, map 등이 있는데요, 그중에 reduce에 대해서 먼저 알아보도록 하겠습니다.

 

reduce 함수의 구문은 아래와 같습니다.

 

array.reduce(callbackFunction(previousValue, currentValue, currentIndex, array1), initialValue);

 

차근차근 설명을 드리겠습니다.

reduce함수의 매개변수는 callbackfunction과 initialValue입니다.

initialValue 부터 설명을 하자면,

callbackFunction을 호출할때 첫 previousValue 값으로 사용될 값 입니다. 

선택적 사용이 가능합니다. initialValue값이 있을 경우 이 값이 callbackFunction의 첫번째 previousValue 값이 되고 currentValue가 배열의 첫번째 인자가 됩니다.(없을 경우 첫번째 previousValue에는 배열의 첫번째 값.)

 

callbackFunction은 4개의 매개변수를 선택적으로 받을 수 있습니다.

previousValue 는 배열의 첫번째 인자, 혹은 initialValue가 있을경우 initialValue.

currentValue 는 배열 내 현재 처리되고 있는 값.

currentIndex 는 배열 내 현재 처리되는 있는 값의 인덱스.

array1 은 현재 호출된 배열 입니다.

 

예를 들어 보도록 하죠.

 

 

<script type="text/javascript">
(function test(){
    var array = [0,1,2,3,4];
    array.reduce(function(previousValue, currentValue, currentIndex, array1){
        console.log(previousValue);
        console.log(currentValue);
        console.log(currentIndex);
        console.log(array1);
    });
})();
</script>

 

위의 test함수의 실행결과를 크롬에서 확인해 보도록 하겠습니다.

 

 보시는 것과 같이 reduce 함수는 배열의 length-1 번 반복 됩니다.

(initialValue 가 없을 경우 배열의 첫번째 인자가 previousValue가 되므로 currentValue가 두번째 인자 값이 되죠.

그래서 console에는 length-1번 찍히게 됩니다. 아래서 다시 설명.)

그리고 callbackFunction에 의해 반환되는 값이 다음의 previousValue 값으로 되게 되죠.

위의 callbackFunction은 리턴되는 값이 없으니 undefined가 출력이 되는 것입니다.

이를 활용하여 배열내 인수의 총 합을 구하는 함수를 만들 수 있습니다.

리턴값만 넣어주면 되죠.

 

<script type="text/javascript">
(function test(){
    var array = [0,1,2,3,4];
    array.reduce(function(previousValue, currentValue, currentIndex, array1){
        console.log(previousValue);
        console.log(currentValue);
        console.log(currentIndex);
        console.log(array1);
        return previousValue+currentValue;
    });
})();
</script>

 

출력결과

 

 

 

회차	previousValue	currentValue	currentIndex	array1
1	0	1	1	[0,1,2,3,4]
2	1	2	2	[0,1,2,3,4]
3	3	3	3	[0,1,2,3,4]
4	6	4	4	[0,1,2,3,4]

 

callbackFunction 에 return previousValue+currentValue를 해주었습니다.

그러니 이전 코드에서 undefined로 출력되던 값이 previousValue+currentValue 값으로 되게 되죠.

그런데 뭔가 이상한 점이 있죠? 배열의 합은 10인데 10이란 값은 어디에서도 볼수 없죠.

reduce 함수가 마지막으로 반복될때 console.log에  6,4,4,[0,1,2,3,4] 을 찍고 합을 구한 return 값이 10이 되기 때문입니다.

 

<script type="text/javascript">
(function test(){
    var array = [0,1,2,3,4];
    var sum = array.reduce(function(previousValue, currentValue, currentIndex, array1){
        return previousValue+currentValue;
    });
    console.log("sum : "+sum);
})();
</script>

 

이렇게 하면 sum = 10이 찍히게 되겠죠.

그럼 여기에 initialValue로 1이라는 값을 줘보도록 하겠습니다.

 

<script type="text/javascript">
(function test(){
    var array = [0,1,2,3,4];
    var sum = array.reduce(function(previousValue, currentValue, currentIndex, array1){
        console.log(previousValue);
        console.log(currentValue);
        console.log(currentIndex);
        console.log(array1);
        return previousValue+currentValue;
    }, 1);
    console.log("sum : "+sum);
})();
</script>

 

결과가 예측 되시나요?

 

 

회차	previousValue	currentValue	currentIndex	array1
1	1	0	0	[01,2,3,4]
2	1	1	1	[01,2,3,4]
3	2	2	2	[01,2,3,4]
4	4	3	3	[01,2,3,4]
5	7	4	4	[01,2,3,4]

 

가장 처음 previousValue에 initialValue로 설정한 1이 들어가게 되고 배열의 첫번째 인자가 currentValue로 들어가게 됩니다.

이런식으로 반복되면 sum값은 11이 되겠죠.

 

그럼 이를 활용해 배열의 중복 값을 제거하는 함수를 만들어보도록 하겠습니다.

 

var array = [0,1,2,3,3,3,4,5,5,6,6]; 
function arrayRemoveOverlap(array){
    var returnArray = array.reduce(function(previousValue, currentValue){
        if(previousValue.indexOf(currentValue)<0) previousValue.push(currentValue);
        return previousValue;
    }, []);
}

 

callbackFunction 에 previousValue 와 currentValue 만을 매개변수로 사용했고

initialValue에 빈 배열을 주었죠.

 

그러니 처음 previousValue에는 빈 배열([])이 들어가고 currentValue에는 0값이 들어가죠.

[] 에 0값이 없으니([].indexOf(0)이 -1) [].push(0) 하게 되어 [0]을 리턴 하게 됩니다.

 

이런식으로 배열내의 값만큼 반복하면서 없는 값만을 배열에 넣어 returnArray에 담게 되는 것이죠.

 

이제 reduce 함수가 조금은 이해가 되셨나요?

고차함수(high-order-function)을 사용하면 소스코드를 보다 효율적으로 작성할 수 있습니다.

 

다음 포스팅에서는 다른 고차함수들에 대해 알아보도록 하겠습니다.

 

참고)

reduceRight 매서드를 활용하면 배열의 마지막 인자부터 previousValue로, 마지막 전값이 currentValue로 들어가게됩니다.

배열이             [0,1,2,3,4,5,6] 일때

reduce 는          ----------->

reduceRight 는   <-----------