배열 매서드 reduce 함수 javaScript

배열 매서드인 reduce 함수에 대해서 알아봅시다.

 

.reduce(함수(누적값, 현재값, 현재인덱스, 원본배열), 초기값)

 

reduce는 배열에 대해서 실행할 수 있는 함수인데,

내부에 '리듀서'(reducer)함수를 가지고 실행하며, 

배열 인덱스 요소들을 리듀서 함수를 실행하므로써

단 하나의 결과만을 반환하는 함수입니다.

 

리듀스함수의 핵심은 단연 '리듀서'reducer 함수입니다.

 

리듀서 함수는 네개의 인자를 가질 수 있습니다.

순서대로

1. 누적값(acc;accumulator)

2. 현재값(cur;currentValue)

3. 현재인덱스(idx)

4. 원본배열(arr)

 

물론 보통 사용되는 인자는 주로 누적값(acc)와 현재값(cur)이 가장 많이 사용되고,

저는 그래서 인자 이름도 acc 와 cur로 자주 사용하고 있습니다. 헷갈리지 않도록요.

 

리듀스 함수는 이렇게 사용합니다.

let initialValue = 0
let values = [33, 55, 11, 44, 22]

function sum(acc, cur){
  return acc + cur;
}
let total = values.reduce(sum, initialValue);

그러니까 리듀서 함수를 선언하는 부분과
배열에 '리듀스'를 적용하는 부분이 존재합니다.

 

근데 이것을 한번에 표현할 수도 있습니다.

이렇게요.

let initialValue = 0
let values = [33, 55, 11, 44, 22]

let total = values.reduce(function sum(acc, cur){
  return acc + cur;
}, initialValue);

뭐 둘은 같은 의미이니 편한 것을 택할 수 있겠습니다.

 

여기서 중요한 것은,

리듀서함수 옆에 적혀있는 초기값이 있다면, 이 값이 acc로 들어가고,

초기값이 주어지지 않았다면, 배열의 첫 인덱스 요소(element)가 

acc 로 들어간다는 것입니다. 

 

acc로 들어간 값은 그 다음 배열의 요소가 cur로 들어오게 되어

acc + cur 이 실행됩니다. 

그리고 그 결과가 다시 acc로 할당되며, 
배열의 모든 요소가 리듀서 함수를 통과할 때 까지 cur로 들어와서 계속되다가

종료됩니다.

 

그래서 결과가 하나의 값으로만 나오는 것입니다. 

 

해당 매커니즘을 잘 이해할 수 있는 참고 사이트를 공유합니다.

http://reduce.surge.sh/

 

JavaScript에서

배열을 다뤄야할 때,

혹은 숫자를 자리수로 계산해야하는 수학 문제에 있어서,

숫자를 문자열로 만든 다음 split('')으로 한자리 숫자의 배열요소로 다룰 때,

리듀서 함수를 사용하면 반복된 연산의 하나의 결과 값을 도출해낼 수 있습니다.

 

배열의 각 요소들에 어떤 계산을 반복해서 적용해야할 때,

리듀스 reduce 매서드를 기억해내자!

 

---

개발 뉴비의 블로그입니다. 수정 보완할 것이 있다면 부담없이 댓글 남겨주세요 :)

배열 매서드 reduce 함수 javaScript