[Javascript] Reduce 메서드란 ?

Reduce 메서드란?

 

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

map과 forEach 와는 조금 다른 누산값을 곁들인 메서드이다.

 

문법

// reduce
const array1 = [10, 20, 30, 40];

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

reduce 메서드 자체의 반환값은 100이 된다.

1. 콜백 함수

콜백 함수의 첫 번째 파라미터는 reduce 메서드에서 이 콜백 함수가 동작할 때 return 하는 값이 다음 콜백 함수의 첫 번째 파라미터로 전달되는 것이다.

배열의 요소를 다 돌고 마지막 콜백 함수가 동작한 이후의 return 값이 reduce 메서드의 return 값이 되는 것이다.

콜백 함수의 파라미터 생략은, 3,4번째 파라미터만 가능하다.

 

2. 초기누산 값

두번째 파라미터인 초기누산값을 주지 않으면 배열의 인덱스 0 값이 초기값으로 지정된다.

 

응용

const hangul = ['가', '나', '다', '가', '나',
   '다', '라', '가', '나', '마'];

const result = hangul.reduce((acc, el, i) => {
  console.log(`${i}번째`)
  console.log(`acc:`, acc);
  console.log(`현재 값:`, el);

  acc[el] = (acc[el] || 0) + 1;

  return acc;
}, {});

console.log("결과: ",result);

위 코드처럼 초기값을 빈 객체로 두고, 배열을 돌면서 중복된 요소를 카운트하는 데에도 충분히 활용할 수가 있다.

참고

두번째 파라미터를 생략 했을 때의 결과

const numbers = [1, 2, 3];

const sum = numbers.reduce((acc, el, i) => {
  console.log(`${i}번째 콜백함수`)
  console.log(`acc: ${acc}`);
  console.log(`현재값: ${el}`);

  return el + acc;
});

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

배열의 index 0이 초기값이 되기 때문에,  0번째 콜백 함수는 동작하지 않는다.

콜백 함수의 동작 횟수에 따라 결과에 차이가 있을법한 경우라면 오류로 이어질 수 있기 때문에, 생략은 가능하지만 

생략하지 않는 것이 권장된다.