[Javascript] 자바스크립트 Reduce 메서드 이해하기

▶자바스크립트 Reduce 메서드 이해하기

오늘은 코딩테스트 문제를 해결하다가 알게된 Reduce 메서드에 대해 알아보도록 하겠습니다 :)

 

🔎 Reduce 메서드란?

---

사전에서는 reduce는 줄이다. 라는 의미로 해석되죠?

 

reduce 메서드는 map, forEach와 비슷하게 배열의 요소들을 순회하면서 반복적인 연산을 하는 메서드이지만

map과 forEach와는 조금 다른 부분들이 있는데요.

 

📌 문법

reduce 메서드는 아래와 같이 두 개의 파라미터를 가지고 있는데요.

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

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

파리미터1️⃣ 콜백 함수

첫 번째는 map과 forEach처럼 콜백 함수를 전달받는데, 이 콜백 함수의 파라미터가 map, forEach와는 조금 다릅니다.

reduce 메서드가 특별한 이유는 바로 이 콜백 함수의 첫 번째 파라미터인데요.

 

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

 

그리고 나서 마지막 콜백 함수가 동작한 이후의 return 값이 reduce 메서드의 return 값이 되는 것입니다.

 

나머지 2,3,4번째 파라미터는 map, forEacth 메서드의 1,2,3번째 파라미터와 역할이 동일합니다.

그렇기 때문에 콜백 함수의 파라미터 생략은 3, 4번째 파라미터만 가능합니다.

 

파리미터2️⃣ 초기(누산) 값

reduce 메서드의 두 번째 파라미터는 초기값입니다.

콜백 함수가 동작하면서 해당 함수의 리턴값이 다음 콜백 함수의 첫 번째 파라미터로 전달되는데, 이 원리대로라면 가장 첫 번째 동작하는 콜백함수의 첫 번째 파라미터는 전달 받는 값이 없습니다.

 

그래서 reduce 메서드의 이 두 번째 파라미터에 첫 번째 콜백 함수에서 동작할 누산값을 전달해 주는 것입니다.

 

📌 예시코드

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

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

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

여기서 acc는 누산값, el는 배열을 돌면서 i번째 값, i는 현재 인덱스값을 의미합니다.

저는 두 번째 파라미터 0을 통해 acc의 초기값을 0으로 지정해 주었습니다.

출력

reduce를 통해 el에는 순서대로 배열의 값을 돌게 되고,

return el + acc; 때문에 el과 sum을 더한 값이 다시 다음 바퀴에서는 acc가 되는 것입니다.

 

📌 응용

방금 reduce의 가장 간단하고 쉬운 예인 요소 값 더하기를 살펴보았었습니다.

사실 reduce의 두 파라미터(콜백 함수, 초기값)을 잘 활용하면, 다양하게 활용할 수가 있는데요.

const votes = ['고양이', '강아지', '고양이', '강아지', '고양이', '강아지', '강아지'];

const result = votes.reduce((acc, el, i) => {
  console.log(`${i}번째 콜백함수`);
  console.log(`acc: `, acc);
  console.log(`el: `, el);
  
  acc[el] = (acc[el] || 0) + 1; // 객체 안에 키가 있다면 거기에  +1, 없다면 바로 0 + 1;
  
  return acc;
}, {});

console.log('-----------');
console.log(`result: `, result);

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

출력

 

📌 참고1 - 두 번째 파라미터 생략

참고로 reduce 메서드에서 초기값이라고 불리는 두 번째 파라미터는 생략이 가능합니다.

만약 두 번째 파라미터를 생략하고 콜백 함수만 전달할 경우, 배열의 첫 번째 요소(0번 index)가 초기값이 되어 동작하게 됩니다.

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

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

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

출력

그런데 방금 위에서 이야기한 것처럼 0번 인덱스가 초기값이 되기 때문에,

콘솔에 출력된 결과처럼 0번째 콜백함수는 동작하지 않게 되는 현상이 발생합니다.

 

📌 참고2 - reduceRight

배열의 요소를 반대방향으로 순회하는 reduceRight라는 메서드도 있습니다.

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

const sum = numbers.reduceRight((acc, el, i) => {
  console.log(`${i}번째 콜백함수`);
  console.log(`acc: ${acc}`);
  console.log(`el: ${el}`);
  
  return el + acc;
});

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

출력