reduce

구문

[ ].reduce(callback, [, initialValue]);

사용 예)

[1,2,3].reduce((a, b)=>{
  return a+b;
}, 0);

[1,2,3].reduce(a, b, c, d) => {
  console.log(c, d);
  return a+b;
}, 1, 2, 3); // 3이 초기값 ( 제일 마지막 값이 초기 값!!)

헷깔렸던 점

[1,2,3].reduce(a, b, c, d) => {
  console.log(c, d);
  return a+b;
  },
  [1, 2, 3]
); // 인자를 배열로 주면 배열 자체가 초기값이 되버림!! 

설명

- reduce 함수는 배열을 돌면서 콜백을 실행하고 하나의 결과를 뱉어낸다.

- reduce함수 안에 콜백에서는 인자를 4개 받을 수 있다.

[].reduce((beforeResult, currentValue, currentIndex, receivedArray)=>{}); // 초기 값은 따로 안줘도 된다.

- 초기값이 주어진 경우에는 beforeResult는 초기값과 같고 currentValue는 배열의 첫 번째 값과 같다.

- 초기값이 주어지지 않은 경우에는 그러면 beforeResult는 배열의 첫 번째 값과 같고 currentValue는 두 번째와 같다.

- beforeResult는 처음에는 초기값 또는 배열의 첫 번째 값이고, 두 번째 배열을 돌 때부터 현재 인덱스의 값까지 콜백으로 처리되어 받은 리턴값을 이다.

- currentValue는 현재 돌고 있는 배열의 값이다.

- currentIndex는 현재 인덱스이다.

- receivedArray는 reduce 함수가 순회하고 있는 배열이다.

예제

let array = [10, 20, 30, 40, 50];

let reduceResult = array.reduce((beforeResult, currentValue, index, receivedArray)
 => {
  
  console.log('beforeResult + currentValue = ', beforeResult + currentValue);
  
  console.log('beforeResult:', beforeResult, 'currentValue:', currentValue, 'index:',
  index, 'receivedArray:', receivedArray);
  
  return beforeResult + currentValue;
},
100);

result

beforeResult + currentValue =  110
beforeResult: 100 currentValue: 10 index: 0 receivedArray: [10, 20, 30, 40, 50]

beforeResult + currentValue =  130
beforeResult: 110 currentValue: 20 index: 1 receivedArray: [10, 20, 30, 40, 50]

beforeResult + currentValue =  160
beforeResult: 130 currentValue: 30 index: 2 receivedArray: [10, 20, 30, 40, 50]

beforeResult + currentValue =  200
beforeResult: 160 currentValue: 40 index: 3 receivedArray: [10, 20, 30, 40, 50]

beforeResult + currentValue =  250
beforeResult: 200 currentValue: 50 index: 4 receivedArray: [10, 20, 30, 40, 50]

let array = [10, 20, 30, 40, 50];

let reduceResult = array.reduce((beforeResult, currentValue, index, receivedArray) 
=> {

  console.log('beforeResult + currentValue = ', beforeResult + currentValue);

  console.log('beforeResult:', beforeResult, 'currentValue:', currentValue, 'index:', index,
 'receivedArray:', receivedArray);

  return beforeResult + currentValue;
});





result

beforeResult + currentValue =  30
beforeResult: 10 currentValue: 20 index: 1 receivedArray: [10, 20, 30, 40, 50]

beforeResult + currentValue =  60
beforeResult: 30 currentValue: 30 index: 2 receivedArray: [10, 20, 30, 40, 50]

beforeResult + currentValue =  100
beforeResult: 60 currentValue: 40 index: 3 receivedArray: [10, 20, 30, 40, 50]

beforeResult + currentValue =  150
beforeResult: 100 currentValue: 50 index: 4 receivedArray: [10, 20, 30, 40, 50]

let add = (a, b)=>{
  return a+b;
};
array.reduce(add, 0); // 150

array.reduce(add, 50); // 200

array.reduce(add); // 150

add함수의 a, b 인자로 beforeResult, currentValue 가 대입된다.

처음에는 beforeResult에 오는 값을 제대로 이해하지 못해서 어려웠다.

콜백을 처리하고 난 리턴 값이 오는 것!

그리고 그 값을 다음 배열의 값과 콜백 처리를 다시해서 다음 인자로 주는 방식!

배열을 돌면서 배열 값으로 특정 처리가 필요할 때 쓰면 유용할 것같다.