[Js] reduce 메서드

31 Oct 2022 in Development on Javascript

• reduce 메서드란?
  • reduce함수의 callback함수 인자 및 초기값
  • 반환 값
• reduce함수의 예시
  • 초기값 0으로 선언
  • 초기값 선언 X
• Reference

reduce 메서드란?

---

reduce메서드는 배열의 각 요소를 순회하며 callback함수의 실행 값을 누적하여 하나의 결과 값을 반환한다.

arr.reduce(callback[, initialValue])

reduce함수의 callback함수 인자 및 초기값

• callback 함수 인자

  1. 누산기 (acc) : 콜백의 반환 값을 누적한다. 콜백의 이전 반환 값 또는 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우 initialValue의 값
  2. 현재 값 (cur) : 처리할 현재 요소
  3. 현재 인덱스 (idx) : 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작
  4. 원본 배열 (src) : reduce를 호출할 배열

• 초기값

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

반환 값

callback 함수를 실행한 결과의 누적 값

reduce함수의 예시

---

초기값 0으로 선언

cosnt count = [1, 2, 3];
result = oneTwoThree.reduce((acc, cur, idx) => {
  console.log(acc, cur, idx);
  return acc + cur;
}, 0);
// 0 1 0
// 1 2 1
// 3 3 2

result;
// 6

초기값 선언 X

cosnt count = [1, 2, 3];
result = oneTwoThree.reduce((acc, cur, idx) => {
  console.log(acc, cur, idx);
  return acc + cur;
});
// 1 2 1
// 3 3 2

result;
// 6

이처럼 초기값을 설정 해주냐 안해주냐에 따라서 콜백의 최초 호출 시 acc와 cur값이 달라지게 된다.

• 초기값 설정한 경우

  callback	acc	cur	idx
  첫번째 호출	초기값	배열의 첫번째 요소	0

• 초기값 설정하지 않은 경우

  callback	acc	cur	idx
  첫번째 호출	배열의 첫번째 요소	배열의 두번째 요소	1

Reference

---

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d
https://tocomo.tistory.com/26