reduce

reduce() 함수는 배열의 각 요소에 대해 주어진 함수를 실행하고, 하나의 결과값을 반환한다.
(원본 배열은 변경되지 않는다)

reduce 형식


arr.reduce((accumulator, value, index, array) => {
  // 누적값을 계산해서 반환
  return 새로운_누적값
}, initialValue)

accumulator: 이전 콜백의 반환값이 누적되는 값
value: 현재 처리 중인 요소값
index: 현재 요소의 인덱스
array: reduce()를 호출한 원본 배열
initialValue: accumulator의 초기값 (선택사항이지만 명시하는 것을 권장한다)
반환값: 최종 누적된 하나의 값

reduce 예제


const arr = [1, 2, 3, 4, 5];
 
const sum = arr.reduce((acc, value) => {
    console.log(`acc: ${acc}, value: ${value}`);
    return acc + value;
}, 0);
 
console.log(`최종 반환값: ${sum}`);

reduce 예제 결과


acc: 0, value: 1
acc: 1, value: 2
acc: 3, value: 3
acc: 6, value: 4
acc: 10, value: 5
최종 반환값: 15

initialValue 유무 차이

initialValue를 생략하면 배열의 첫 번째 요소가 초기값이 되고, 두 번째 요소부터 순회한다.
빈 배열에서 initialValue를 생략하면 오류가 발생하므로 명시하는 것을 권장한다.


const arr = [1, 2, 3, 4, 5];
 
// initialValue 있음: 0부터 시작, 5회 순회
arr.reduce((acc, value) => acc + value, 0); // 15
 
// initialValue 없음: 1부터 시작, 4회 순회
arr.reduce((acc, value) => acc + value);    // 15
 
// 빈 배열에서 initialValue 없으면 오류 발생
[].reduce((acc, value) => acc + value); // TypeError

실용 예제 01: 객체 배열에서 총 금액 계산


const orders = [
  { item: 'coffee', price: 4500 },
  { item: 'cake', price: 6500 },
  { item: 'juice', price: 5000 },
];
 
// 총 금액을 계산한다
const total = orders.reduce((acc, value) => {
  return acc + value.price
}, 0);
 
console.log(total);

실용 예제: 객체 배열에서 총 금액 계산 결과

실용 예제 02: 배열에서 음수와 양수 개수 카운트


const numbers = [1,3,5,6,-7,-5];
 
const result = numbers.reduce((arr, value) => {
    if (value <0) {
        acc[0]++;
    } else {
        acc[1]++;
    }
    return acc;
}, [0, 0]);  
 
console.log(`음수 개수: ${result[0]}, 양수 개수: ${result[1]}`);

실용 예제: 배열에서 음수와 양수 개수 카운트 결과


음수 개수: 2, 양수 개수: 4