개발일지

es5의 Array.prototype.reduce 활용하기

• javascript

리듀서?

Flux의 최신 구현체인 Redux에서는 Action과 State를 결합해서 Store에게 ‘작업’을 지시합니다.
이때 ‘작업 객체’를 리턴하는 것은 단순한 함수인데, 이 함수를 Redux에서는 Reducer(리듀서) 라고 부릅니다.

간단하게 재귀호출을 구현하는 Array.prototype.reduce

제작자는 Array.prototype.reduce라는 함수에서 영감을 얻어서 이름을 리듀서라고 지었다고 합니다.
그렇다면 Array.prototype.reduce라는 함수는 어떤 상황에서 사용하는 걸까요?
MDN의 도움을 받아서 다음과 같은 예제를 작성할 수 있었습니다.

Array.prototype.reduce를 사용한 1~100까지의 합 구하기

See the Pen Array.prototype.reduce의 활용 by cinos (@shoveller) on CodePen.

Array.prototype.reduce함수는 배열 안의 요소를 하나씩 순회하면서 그 때마다 콜백 함수를 실행시킵니다.
만약 배열 요소의 갯수가 100개라면, 똑같은 함수가 100번 실행됩니다.
이때 인자로 이전 값과 현재값, 현재 인덱스, 전체 배열의 참조를 건네줍니다.
따라서 재귀호출 코드를 굉장히 간단하게 작성할 수 있다는 장점이 있습니다.

자매품 Array.prototype.reduceRight

Array.prototype.reduce는 배열요소를 왼쪽에서 오른쪽으로 순회하지만,
Array.prototype.reduceRight는 배열요소를 오른쪽에서 왼으로 순회합니다.
큐를 구현하기가 정말 쉬워졌습니다.

덕분에 유용한 메소드를 배울 수 있었지만, 아무리 그래도 Redux의 리듀서는 이름을 이상하게 지은 것 같습니다.

comments powered by Disqus