jQuery - Array.reduce() 함수의 이해 및 사용법 예시

reduce는 배열에 계산처리를 할 때 유용하게 쓰일 수 있는 방법입니다.

배열의 사칙연산처리를 할 때 for문으로도 처리할 수 있지만 reduce로도 간단하게 가능합니다.

reduce의 기본 포맷은 다음과 같습니다

 

.reduce()

Array.reduce(function(acc, cur, idx, arr){
    // acc = return처리로 값을 누적시킬 수 있는데 이때 return처리되는 값의 누적값
    // cur = 현재 루프 돌고 있는 값
    // idx = 현재 루프 돌고 있는 배열위치
    // arr = 전체 배열
    
    // return 처리를 할 경우 값이 acc에 값이 누적됨
}, value);
    // value = 초기값 - 첫번째 인덱스 값을 배열보다 우선하는 인덱스로 하여 지정할 수 있습니다

 

 

기본 사용법

1 ~ 10까지 배열을 합하는 방법입니다.

루프를 돌 수록 acc, cur의 변화는 다음과 같습니다

 

1회전 : acc = 1 / cur = 2

2회전 : acc = 3 / cur = 3

3회전 : acc = 6 / cur = 4 

.

.

.

9회전 : acc = 45 / cur = 10

 

return되는 값은 다음 루프에서 acc로 나오게 되며, acc는 return으로 계속 누적된 값을 뜻합니다.

 

첫 회전에 acc는 1, cur은 2가 나오는데 현재 루프를 뜻하는 cur이 2이기 때문에 idx는 0이 아닌 1부터 시작됩니다.
초기값이 주어지지 않은 reduce는 첫번째, 두번째 배열을 동시에 데려오므로 idx는 1부터 시작합니다

 

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var sum = arr.reduce(function (acc, cur, idx, arr) {
    return acc + cur;
});

// sum = 55

 

 

초기값을 추가한 사용법

위의 합계를 처리하는 방식과 같은 방식이며, 초기 시작값을 10000으로 세팅합니다.

 

1회전 : acc = 10000 / cur = 1

2회전 : acc = 10001 / cur = 2

3회전 : acc = 10003 / cur = 3 

.

.

.

10회전 : acc = 10045 / cur = 10

 

위의 예시와는 다르게 초기값이 10000으로 주어져서 첫번째, 두번째 배열을 같이 가져오지 않고, 첫번째 배열부터 가져오기 때문에 초기값이 주어진 reduce함수의 idx는 0부터 시작하게 됩니다.

 

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var sum = arr.reduce(function (acc, cur, idx, arr) {
    return acc + cur;
}, 10000);

// sum = 10055