[JavaSrcipt] reduce

✅ reduce

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서함수를 실행하고

하나의 결과값을 반환함.

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

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

누산기 (acc)
현재 값 (cur)
현재 인덱스 (idx)
원본 배열 (src)

arr.reduce(callback[, initialValue])   // []초기값 생략가능

매개변수
callback
  배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다.
   accumulator
      누산기는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는,

      콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.
   currentValue
      처리할 현재 요소.
   currentIndex Optional (생략가능)
      처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.
   array Optional (생략가능)
      reduce()를 호출한 배열.
initialValue Optional (생략가능)
   callback의 최초 호출에서 첫 번째 인수에 제공하는 값.

   초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다.

   빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.

 

 

❗ 콜백의 최초 호출 때 accumulator와 currentValue는 다음 두 가지 값 중 하나를 가질 수 있습니다.

만약 reduce() 함수 호출에서 initialValue를 제공한 경우, accumulator는 initialValue와 같고 currentValue는 배열의 첫 번째 값과 같습니다. initialValue를 제공하지 않았다면, accumulator는 배열의 첫 번째 값과 같고 currentValue는 두 번째와 같습니다.

[0,1,2,3,4]

즉 초기값을 정하지않았다면 acc는 [0]이고 즉 0 cur은 배열의 [1] 즉 1

초기값을 만약 ,10 이렇게 정했다면 acc는 10이고 cur은 [0] 즉 0

 

아래 예제를 통해 이해하자

 

✅ reduce() 작동방식

 

예제1) 초기값 제공X

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});

callback	accmulator	currentValue	currentIndex	array	반환값
1번째호출	0	1	1	[0,1,2,3,4]	1
2번째호출	1	2	2	[0,1,2,3,4]	3
3번째호출	3	3	3	[0,1,2,3,4]	6
4번째호출	6	4	4	[0,1,2,3,4]	10

return에 acc + cur 을 받는다.

reduce() 가 결과로 반환하는값은 10

 

✅ - 위처럼 완전한함수대신 화살표함수 사용시.

[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr );

 

 

예제2) 초기값 제공O

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}, 10);

예제1과 같은 코드이지만 ,10 초기값을 설정해주었다.

callback	accmulator	currentValue	currentIndex	array	반환값
1번째호출	10	0	0	[0,1,2,3,4]	10
2번째호출	10	1	1	[0,1,2,3,4]	11
3번째호출	11	2	2	[0,1,2,3,4]	13
4번째호출	13	3	3	[0,1,2,3,4]	16
5번째호출	16	4	4	[0,1,2,3,4]	20

초기값을 설정해주었으니 최초호출시 cur은 배열의 첫번째값과 같다.

reduce() 가 결과로 반환하는값은 20.

 

 

예제) 배열의 모든 값 합산

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// sum is 6
////////////////////////////
✅화살표함수사용
var total = [ 0, 1, 2, 3 ].reduce(
  ( accumulator, currentValue ) => accumulator + currentValue,
  0
);

acc 누적합, cur 현재값 인자를 사용해 returc으로 acc+cur을 받으며 초기값은 0

 

 

 

 

 

이전 문제뿐아니라 다른문제에서도 다른분들의 풀이에서 reduce() 메서드를 보고

처음엔 복잡해보여서 그냥 지나쳤는데 갈수록 내 코드가 지저분해보이고

깔끔하게 써보고싶어서 이해할겸 기록할겸 검색해 정리해봤다.

출처에 정리한내용이후에도 내용이 많지만 우선은 여기까지 이해하는걸로

 

 

 

 

-출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce#%EA%B0%9D%EC%B2%B4_%EB%B0%B0%EC%97%B4%EC%97%90%EC%84%9C%EC%9D%98_%EA%B0%92_%ED%95%A9%EC%82%B0