reduce함수는 배열의 각 요소에 대한 callback함수를 실행하고 실행 한 값을 누적하여 하나의 결과값을 반환 한다.

기본 구문

 arr.reduce((accumulator, currentValue, currentIndex, array) => {
          //something
 },initialValue)

reduce함수에는 2개의 파라미터를 받는다. (callback, initialValue)


첫번째는 callback함수 자리이고, 또 네개의 파라미터를 받는다.

1. accumulator = callback의 반환값을 누적함. initialValue의 값을 제공한경우 initialValue값이 됨.

2. currentValue = 배열의 현재 요소.

3. currentIndex = 배열의 현재 인덱스

4. array = 현재 배열.



두 번째는 initialValue

초기 accumulator을 설정하는 값 이다.
초기값을 설정 하지 않으면, 배열의 첫 번째 요소를 사용 한다.

ex1)

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, current) => {
	accumulator + current
}, 0);
console.log(sum);    //15

초기값을 0으로 주었다.
accumulator = 0 인 셈이다.
매개변수 accumulator는 반환값을 누적하기 때문에 아래와 같이 실행 된다.

0 + 1 = 1;
1 + 2 = 3;
3 + 3 = 6;
6 + 4 = 10;
10 + 5 = 15;

ex2

4개의 파라미터를 다 사용해보는 예제를 해보겠다.

const numbers = [1, 2, 3, 4, 5];
const avg = numbers.reduce((accumulator, current, index, array) => {
  if(index === array.length - 1){
    return (accumulator + current) / array.length;
  } else {
    return accumulator + current;
  }
},0)
console.log(avg);    //3

코드의 로직을 설명하자면
초기값을 0으로 설정해주었고,
처음 부터 조건문을 충족 하지 않기 때문에 else문의 실행코드가
조건문을 충족할 때 까지 누적이 된다.
0 + 1;
1 + 2;
...
... (생략)

조건문을 충족 했을때의 값은 // accumulator = 10 이 된다.
15 / 5 = 3 이된다.

ex3

배열에 담겨있는 같은 원소가 몇개인지 알아보는 예제

const alphabets = ['a', 'a', 'a', 'b', 'c', 'c', 'd', 'e'];
const counts = alphabets.reduce((acc,current,index,arr) => {
if (acc[current]) {
	acc[current] += 1;
} else {
	acc[current] = 1;
}
	return acc;
}, {})
console.log(counts);    //{a: 3, b: 1, c: 2, d: 1, e: 1}

초기값을 빈 객체로 주었다.
acc[current]를 해석해보자면 acc.a와 같다.


처음 조건문을 충족하지 않기 때문에
acc.a = 1; 로 시작한다. 그 후 조건문을 충족하게 되니까
acc.a = 2;
acc.a = 3; 이 된다.


b는 조건문을 충족 하지 못하므로
acc.b = 1;