[JS] 배열 고차함수 reduce() 정리

[reduce / reduceRight]

• 자바스크립트 Array.prototype
• 배열에 대하여 주어진 콜백 함수를 실행하고, 하나의 결과 값을 반환
• reduce() 메소드는 왼쪽 원소부터 콜백 함수를 실행
• reduceRight() 메소드는 오른쪽 원소부터 콜백 함수를 실행
• array 메소드의 아버지라고 불림
  • map(), filter(), join() 같은 array 메소드들을 모두 reduce() 메소드로 구현이 가능함

---

reduce()

구문

배열.reduce((acc, cur, idx, src) => {
}, [, initialValue])

매개변수

• 콜백함수

인수		설명	옵션 여부
accumulator	누산기	순회하면서 계속 더해져서 합쳐지는 값	🔑 필수
currentValue	현재 값	현재 값	🔑 필수
currentIndex	현재 인덱스	배열 인덱스	🔧 옵션
array	원본 배열	참조한 배열	🔧 옵션

 

인수		설명	옵션 여부
initialValue	이니셜 값	-  콜백 함수의 최초 호출에서 첫 번째 인수에 제공하는 값 -  초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용 -  빈 배열에서 초기값 없이 reduce() 호출 시 오류 발생	🔧 옵션

반환 값

누적 계산의 결과 값.

---

reduce() 작동 방식

reduce() 메소드는 initialValue 값 유무 차이에 따라 작동 방식이 다르다.

• 값이 없다 → 인덱스 1부터 콜백 함수 실행
• 값이 있다 → 인덱스 0부터 콜백 함수 실행

initialValue 값이 없을 경우

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

📖 reduce() 함수 호출 시 initialValue 값이 없는 경우

-  accumulator는 배열의 첫 번째 값
-  currentValue는 배열의 두 번째 값

	accumulator	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

이때 reduce()가 결과로 반환하는 값은 10이다.

initialValue 값이 있는 경우

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

📖 reduce() 함수 호출 시 initialValue 값이 있는 경우

-  accumulator는 initialValue
-  currentValue는 배열의 첫 번째 값

	accumulator	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

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

---

reduce() 실전 예제

(작성 중)

---

Reference

Array.prototype.reduce() - mdn web docs

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B0%B0%EC%97%B4-%EA%B3%A0%EC%B0%A8%ED%95%A8%EC%88%98-reduce