2.8Reduce의 용법

들어가며

알고리즘 문제 풀이를 하며 다른 사람들의 풀이를 참고하던 중, 상당히 많은 사람들이 reduce 메소드를 잘 활용하는 것을 보고 이번 기회에 확실히 내 것으로 만들어야겠다고 생각했다.

문법

자바스크립트 배열에 내장된 메소드로, 배열의 값들을 계산하여 누적 결과를 만든다. 이름의 유래가 된 '축약'은 배열의 모든 요소를 순회하며 하나의 값으로 축약(누적)한다는 것에서 온 말이다.

javascript
arr.reduce((accumulator, currentValue, currentIndex(optional), array(optional))=> {
  // 로직
}, initialValue)

초기값(initialValue)으로부터 시작되는 누적되는 값(accumulator)을 현재 순회 중인 값(currentValue)과 함께 로직에 따라 처리하는 메소드다. 사실상 반드시 필요한 변수는 이 셋이고, currentIndex와 array 즉 셋째, 넷째 매개변수는 특수 상황에서 쓰인다.

기본 예시(acc, cur, initialValue)

여러 가지 예시를 통해 보다 구체적으로 살펴보자.

1. 배열 합계 구현하기

javascript
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, cur) => acc + cur, 0); //10

2. 최댓값 구하기

javascript
const nums = [3, 5, 7, 2];
const max = nums.reduce((acc, cur) => cur > acc ? cur : acc, nums[0]); // 7

3. 배열을 하나의 객체로 합치기

javascript
const votes = ['yes', 'no', 'yes', 'yes', 'no'];
const count = votes.reduce((acc, cur) => {
  acc[cur] = (acc[cur] || 0) + 1;
  return acc;
}, {}); // { yes : 3, no : 2}

4. flat 구현

javascript
const nested = [[1, 2], [3, 4]];
const flat = nested.reduce((acc, cur) => acc.concat(cur), []);
// [1, 2, 3, 4]

심화 예시(currentIndex, array 사용)

1. currentIndex 활용

인덱스 기반 작업이 필요한 경우 사용한다. 예를 들어 짝수번째 요소만 더한다거나 인덱스와 값을 같이 저장하는 경우다.

짝수 인덱스에 있는 숫자만 더하는 코드를 작성해보자.

javascript
const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, cur, idx) => {
  return idx % 2 === 0 ? acc + cur : acc;
}, 0); // 1 + 3 = 4

2. array 활용

array.length 등의 데이터가 필요한 경우 사용한다. 예를 들어, 마지막 요소까지 다 더했으면 곱하기 2를 한다거나 하는 식이다.

javascript
const arr = [1, 2, 3, 4];
const result = arr.reduce((acc, cur, idx, array) => {
  acc += cur;
  if(idx === array.length - 1){
    acc *= 2; // 마지막까지 다 더했으면 곱하기 2
  }
  return acc;
}, 0)