자꾸 잊는 reduce()

• 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환하는 메소드.

array.reduce(callback(accumulator, currentValue[, index[, array]]), [initialValue])

• callback: 각 요소에 대해 실행할 함수. 네 개의 매개변수를 가짐.
  • accumulator: 누적값(이전 콜백의 반환값)
  • currentValue: 현재 처리 중인 배열 요소
  • index(선택): 현재 처리 중인 요소의 인덱스
  • array(선택): reduce를 호출한 배열
• initialValue(선택): 첫 번째 호출에서 accumulator로 사용할 값

 

☕ 사용 예시

- 배열의 합계 구하기

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // 15

단계	accumulator	currentValue	반환값
1	0	1	0 + 1 = 1
2	1	2	1 + 2 = 3
3	3	3	3 + 3 = 6
4	6	4	6 + 4 = 10
5	10	5	10 + 5 = 15

 

- 객체 배열에서의 활용

const cafe = [
    { name: '아메리카노', price: 4500 },
    { name: '흑임자 라떼', price: 5500 },
    { name: '밀크티', price: 6000 }
];
const total = cafe.reduce((acc, item) => acc + item.price, 0);

console.log(total); // 16000

단계	acc(누적값)	item(현재값)	계산	반환값
1	0	price: 4500	0 + 4500	4500
2	4500	price: 5500	4500 + 5500	10000
3	10000	price: 6000	10000 + 6000	16000