[JS] 리듀서 파헤치기 about Reducer

filter, map, forEach 같은 메서드는 사용방법도 꽤나 간단하고 직관적으로 이해가 쉬운데, 그에 반해 Reducer는 콜백 부분이나 동작이 이해가 잘 안되어 블로그 글을 남긴다.

Reducer 리듀서

리듀서(reducer)는 배열의 내장함수(메서드) 중 하나로 누적값을 계산하는데 사용한다.
쉽게 말해, 배열 형태를 순회하면서 단 하나에 값을 반환하는 일이 필요할때 reducer를 사용한다.

const addAccCur = function (acc, cur) {
	return acc + cur;
};

let arr = [1,2,3,4,5,6,7];
let output = arr.reduce(addAccCur);
console.log(output) //28

Reduce 활용 구조

reduce 메서드에 경우 내부에 인자로 함수(콜백함수)와 초기값을 가지고,
그 내부 콜백함수는 두개 의 매개변수를 가진다.

• acc : 누적값 (prev 라고 쓰기도 함)
• cur : 현재값 (curr 라고 쓰기도 함)
• 내부 콜백함수 안에서는 꼭 리턴값 (return)이 필요하다.
• initVal : 리듀서가 실행될때 초기 acc 값으로 설정되는 원시값 (생략해도 동작함!)

const arr = [1,2,3,4,5];
const initVal = 0;
const sumOfArr = arr.reduce((acc, cur) => {
	return acc + cur;
}, initVal)

sumOfArr //15

Reduce 동작 과정

Reduce에 동작과정을 의사코드로 작성하면 다음과 같다.
initVal 이 지정되지 않았을 때

1) 배열의 앞 index (i = 0) 부터 배열을 순회하면서

• acc = arr[i] //arr[0], cur = arr[i+1]; //arr[1]
• acc = 콜백함수의 return 값
• 리턴값으로 인해 새로 지정된 acc 값은 다음 루프에 acc 값으로 전달된다.

2) 다음 인덱스 (i = 1)

• cur = arr[i+1]; //arr[2]
• acc = 콜백함수의 return 값
  

배열의 순회를 종료할 때까지 반복하여 최종 return 되는 값을 반환함

initVal(초기값) 이 주어졌을 때

initVal은 reduce 메서드에 두번째 매개변수로 콜백함수 뒤에 오는 원시값(primitive data) 이다.

이 초기값이 주어졌을 경우 초기값이 주어졌을 때보다 한번에 루프를 더 실행하는데, initVal을 acc로 설정, index[0] 에 값을 cur로 지정해둔 루프가 한번 더 실행된다.