[js] reduce 함수 : React에서 필요한 자바스크립트 문법 ⭐️⭐️⭐️⭐️⭐️

• reduce함수는 리듀서(reducer) 함수를 실행하고 하나의 결과 값을 반환한다.
• reducer(리듀서)함수는 내장함수(메서드) 중 하나로 누적 값을 계산하는데 사용한다. (배열 형태를 순회하면서 단 하나의 값을 반환할 때 사용.)
• reducer(리듀서) 함수는 네개의 인자를 가진다. [1. 누산기(acc), 2. 현재값 (cur), 3. 현재 인덱스 (idx), 4. 원본 배열 (src)] : 함수의 반환 값이 누산기에 할당 되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다.
• 실무에서 recude() 함수는 보통 배열을 특정 자료형으로 변환하는데 사용.

---

reduce() JS 구문

---

    arr.reduce(callback[, initialValue])

(callback)콜백 함수 : 파라미터로 일반적인 변수나 값을 전달 하는 것이 아니라 함수 자체를 전달하는 것.

---

매개변수

---

callback

배열의 각 요소에 대해 실행 할 함수. 다음의 네가지 인수를 받는다.

1. accumulator (필수 인수)
   • 누산기는 콜백의 반환 값을 누적한다. 콜백의 이전 반환 값 또는, 콜백의 첫 번째 호출이면서, initialValue(초기값)를 제공한 경우에는 initialValue의 값이 들어간다. 
2. currentValue (필수 인수)
   • 처리 할 현재 요소.
3. currentIndex (선택적 인수)
   • 처리 할 현재 요소의 인덱스. initailValue(초기값)를 제공한 경우 0, 아니면 1부터 시작한다. 
4. array (선택적 인수)
   • reduce()를 호출한 배열.

initialValue

callback의 최초 호출에서 첫번째 인수에 제공하는 값. 초기 값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다. 빈 배열에서 초기 값 없이 reduce()를 호출하면 오류가 발생한다.

---

반환값

---

누적 계산의 결과 값.

---

설명

---

reduce() 는 비어있는 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번 씩 실행하는데, 콜백 함수는 다음의 네 인수를 받는다.

accumulator, currentValue, currentIndex, array

콜백의 최초 호출 때 accumulator, currentValue 에 들어가는 값이 아래의 경우에 따라서 달라질 수 있다. 

1. reduce함수의 함수의 두 번째 인자 initialValue의 값이 있을 경우 accumulator에 initialValue의 값이 들어가며 currentValue에는 배열의 첫번째 값이 들어간다. 
2. reduce함수의 함수의 두 번째 인자 initialValue의 값이 없을 경우 accumulator에 배열의 첫번째 값이 들어가며 currentValue에는 배열의 두번째 값이 들어간다. 

배열이 비어있는데 reduce 함수의 두번째 인자 initialValue 값도 없는 경우 TypeError가 발생한다....

참고: initialValue를 제공하지 않으면, reduce()는 인덱스 1부터 시작해 콜백 함수를 실행하고 첫 번째 인덱스는 건너 뜁니다. initialValue를 제공하면 인덱스 0에서 시작합니다...

var maxCallback = (acc, cur) => Math.max(acc.x, cur.x);
var maxCallback2 = (max, cur) => Math.max(max, cur);

// initialValue 없이 reduce()
[{ x: 22 }, { x: 42 }].reduce(maxCallback); // 42
[{ x: 22 }].reduce(maxCallback); // { x: 22 }
[].reduce(maxCallback); // TypeError

// map/reduce로 개선 - 비었거나 더 큰 배열에서도 동작함
[{ x: 22 }, { x: 42 }].map((el) => el.x).reduce(maxCallback2, -Infinity);

---

reduce 작동 방식

1. 아래는 recude() 두번째 인자 값 initialValue 값이 없을 때 작동 방식이다.

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

화살표 함수로 아래와 같이 동일하게 표현 가능하다. 

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

콜백은 4번 호출되며, 각 호출의 인수와 반환값은 다음과 같다. 

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

2. 아래는 recude() 두번째 인자 값 initialValue 값이 있을 때 작동 방식이다.

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

accumulatorcurrentValuecurrentIndexarray반환값

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

Array.prototype.reduce() - JavaScript | MDN

위의 홈페이지에 설명이 잘 되어 있음.(참고함)