Javascript | Reduce

Array.prototype.reduce()

JavaScript에서 **reduce 함수**는 배열의 요소를 순차적으로 순회하면서 리듀서(reducer) 함수를 실행하고 하나의 결과값을 반환 배열 요소의 순회는 `initialValue`에 설정 유무에 따라 순회를 시작하는 index 0부터 시작할수도 있고, index 1부터 시작할수도 있다. 주로 **배열 요소의 합계를 계산(누적값)** 하는데 사용되며, 배열 또는 객체로 반환할 수도 있다.

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);

Syntax

arr.reduce(callback[, initialValue])

callback
배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다.
accumulator(acc)
누산기는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.
currentValue(cur)
처리할 현재 요소.

배열 요소의 총 합

initialValue가 설정되어 있지 않으므로 accumulator의 초기값은 0번째 index의 값인 1이며, index 1부터 순회합니다.
순회하면서 배열 요소의 값을 누산기(accumulator)에 누적합니다.

let arr = [1, 2, 3, 4, 5];

let totalValue = arr.reduce(function(accumulator, currentValue, index) {
  console.log(`*****${index}번째 index*****`);
  console.log(`accumulator : ${accumulator}`);
  console.log(`currentValue : ${currentValue}`);
  console.log('\n');
  return accumulator + currentValue;
})

console.log(`totalValue : ${totalValue}`);

객체 배열에서의 값 합산

객체 배열에서 initialValue를 설정하지 않으면, accumulator가 객체이므로 정상적으로 계산이 되지 않다.

let arr = [{value : 1}, {value : 2}, {value : 3}];

let totalValue = arr.reduce(function(accumulator, currentValue, index) {
  console.log(`*****${index}번째 index*****`);
  console.log(accumulator);
  console.log(currentValue);
  console.log('\n');
  return accumulator + currentValue.value;
})

console.log(`totalValue : ${totalValue}`);

initialValue를 설정하여 위 코드를 정상적으로 동작하도록 처리
accumulator은 initialValue의 값으로 초기화되고 index 0부터 순회를 시작한다.

let arr = [{value : 1}, {value : 2}, {value : 3}];

let totalValue = arr.reduce(function(accumulator, currentValue, index) {
  console.log(`*****${index}번째 index*****`);
  console.log(accumulator);
  console.log(currentValue);
  console.log('\n');
  return accumulator + currentValue.value;
}, 0)

console.log(`totalValue : ${totalValue}`);

출처: https://developer-talk.tistory.com/146 [평범한 직장인의 공부 정리:티스토리]

[JavaScript]reduce함수 사용 방법 | 출처: https://developer-talk.tistory.com/146