[JavaScript] Reduce 메소드

reduce() 메소드란?

reduce() 메소드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

reduce() 메소드 구문

// reduce - 기본 문법
arr.reduce(callback[, initialValue])

// reduce - 상세한 버전
const numbers = [1,2,3,4];

numbers.reduce((누산값, 현재요소값, 현재요소의index, 현재배열) =>{
   return 다음누산값;
}, 초기누산값);

매개변수

1. callback

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

• 누산기 (accumulator)
  - 누산기는 콜백의 반환값을 누적한다.
  - 콜백의 이전 반환값 또는 콜백의 첫 번째 호출이며, initialValue를 제공한 경우 initialValue의 값이다.
• 현재 값 (currentValue)
  - 현재 처리할 요소
• 현재 인덱스 (currentIndex) - optional
  - 현재 처리할 요소의 인덱스
  - initialValue를 제공한 경우 0, 아니면 1부터 시작
• array(array/src) - optional
  - reduce() 메소드를 호출한 현재 배열/원본 배열

2. initialValue - optional
callback의 최초 호출에서 첫 번째 인수에 제공하는 값. initialValue를 설정했느냐 안했느냐에 따라 콜백의 최초 호출 시의 accumulator와 currentValue가 달라진다.

 

• initialValue를 설정 한 경우

callback	accumulator	currentValue	currentIndex
1번째 호출	initialValue	배열의 첫번째 요소	0

• initialValue를 설정하지 않은 경우

callback	accumulator	currentValue	currentIndex
1번째 호출	배열의 첫번째 요소	배열의 두번째 요소	1

코드로 구문 이해해보기

1. initialValue 설정 X

const numbers = [1, 2, 3, 4];

const sum = numbers.reduce((누산기, 현재값, 배열요소순서) => {
  console.log(`${배열요소순서}번째 콜백함수`)
  console.log(`누산기: ${누산기}`);
  console.log(`현재값: ${현재값}`);

  return 누산기 + 현재값;
},);

console.log(`-----------`);
console.log(`sum: ${sum}`);

reduct()의 두 번째 인수로 초기값을 제공하지 않은 경우 콘솔창 결과

2. initialValue 설정 O

const numbers = [1, 2, 3, 4];

const sum = numbers.reduce((누산기, 현재값, 배열요소순서) => {
  console.log(`${배열요소순서}번째 콜백함수`)
  console.log(`누산기: ${누산기}`);
  console.log(`현재값: ${현재값}`);

  return 누산기 + 현재값;
}, 10);

console.log(`-----------`);
console.log(`sum: ${sum}`);

reduct()의 두 번째 인수로 초기값 10을 제공한 경우 콘솔창 결과

- 위 두 예문에서 볼 수 있듯이 initialValue를 설정하기 않으면 reduce()는 인덱스 1부터 시작해 콜백 함수를 실행하고 0번째 인덱스는 건너띈다. 따라서 배열의 길이 -1만큼 콜백 함수가 동작하게 된다.

-  initialValue를 제공하면 인덱스 0에서 시작하므로 모든 배열들이 콜백 함수의 동작을 적용 받을 수 있도록 initialValue는 생략하지 않는 것이 안전하므로 초기값을 생략하지 않는 것이 권장된다. 

예제 코드 작성해보기

1. reduce() 메소드로 배열 내 모든 값의 합 구해보기

let age = [10, 15, 20];

let sumAge = age.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
},0);

console.log(sumAge); //45

// 1번째 accumulator = 0, currentValue = 10, i = 0, return 10
// 2번째 accumulator = 10, currentValue = 15, i = 1, return 25
// 3번째 accumulator = 25, currentValue = 20, i = 2, return 45

//화살표 함수를 사용한 코드
let age = [10, 15, 20];

let sumAge = age.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
},0);

console.log(sumAge); //45

2. reduce() 메소드로 배열 내 원하는 항목의 값만 더하기

let shoppingList = [
  {
    name : '양배추',
    price : 2000,
    카테고리 : '채소',
  },
  {
    name : '당근',
    price : 500,
    카테고리 : '채소',
  },
  {
    name : '꼬북칩',
    price : 1800,
    카테고리 : '간식',
  },
  {
   name : '구구콘',
   price : 1500,
   카테고리 : '간식',
  }
];

const sumPrice = shoppingList.reduce((acc, cur) => {
  return acc + cur.price;
}, 0);

console.log('장보기 예상 가격', sumPrice);