맛도리 reduce

성태팍·2024년 11월 19일

reduce는 자바스크립트에서 배열을 다룰 때 매우 강력한 함수이다. 배열을 하나의 값으로 축약할 때 사용되며 숫자뿐 아니라 객체, 배열 등 다양한 데이터 타입으로 변환하는 데 유용하다. 우리 회사에서도 데이터 집계, 변환, 필터링 등 다양한 상황에서 많이 사용한다. 이번 포스팅에서는 reduce를 현업에서 어떻게 활용할 수 있는지 사용 예제를 통해 살펴보겠다.

1. reduce의 기본 개념

reduce는 배열의 각 요소를 순회하면서 누적값을 계산한다. 콜백 함수와 초기값을 기반으로 동작한다.

구문

array.reduce((accumulator, currentValue, index, array) => {
}, initialValue);

accumulator: 이전 콜백 함수의 반환값을 저장하는 누적값
currentValue: 현재 배열 요소
index: 현재 요소의 인덱스 (옵션)
array: 호출된 배열 자체 (옵션)
initialValue: accumulator의 초기값 (옵션, 기본값은 배열의 첫 번째 요소)

2. 현업에서 자주 사용하는 패턴과 예제

2.1 배열 요소의 합 구하기

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

const sum = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(sum); // 15

2.2 데이터 집계

const orders = [
  { id: 1, amount: 50 },
  { id: 2, amount: 30 },
  { id: 3, amount: 20 },
];

const totalAmount = orders.reduce((acc, order) => acc + order.amount, 0);

console.log(totalAmount); // 100

2.3 배열 요소를 객체로 변환

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const userMap = users.reduce((acc, user) => {
  acc[user.id] = user.name;
  return acc;
}, {});

console.log(userMap);
// { 1: 'Alice', 2: 'Bob', 3: 'Charlie' }

2.4 중복 제거

const items = ['apple', 'banana', 'apple', 'orange', 'banana'];

const uniqueItems = items.reduce((acc, item) => {
  if (!acc.includes(item)) {
    acc.push(item);
  }
  return acc;
}, []);

console.log(uniqueItems); // ['apple', 'banana', 'orange']

2.5 다차원 배열 평탄화 (Flattening)

중첩된 배열을 단일 배열로 평탄화할 때도 reduce를 사용할 수 있다.

const nestedArray = [[1, 2], [3, 4], [5]];

const flattened = nestedArray.reduce((acc, curr) => acc.concat(curr), []);

console.log(flattened); // [1, 2, 3, 4, 5]

2.6 데이터 분류 (Grouping)

데이터를 특정 기준으로 그룹화할 때도 reduce를 사용할 수 있다.

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 25 },
];

const groupedByAge = people.reduce((acc, person) => {
  const { age } = person;
  if (!acc[age]) {
    acc[age] = [];
  }
  acc[age].push(person);
  return acc;
}, {});

console.log(groupedByAge);
// {
//   25: [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 25 }],
//   30: [{ name: 'Bob', age: 30 }]
// }

3. 주의사항

초기값 설정

초기값을 설정하지 않으면 배열의 첫 번째 요소가 누적값으로 설정된다. 이 경우 예상치 못한 결과가 발생할 수 있다.

가독성

reduce는 강력하지만, 로직이 복잡해질수록 읽기 어려워질 수 있다. 적절한 변수명을 사용하고 가능하면 필요한 경우 보조 함수로 분리하는 것이 좋다.

불변성 유지

reduce 내부에서 누적값(accumulator)을 직접 수정하지 않고 새로운 객체나 배열을 반환하는 것이 바람직하다.

4. 여담

코테에서도 다른 사람들 답안을 살펴보면 for문 if문 돌려서 주르르륵 작성한 것을 reduce 단 한 문장으로 간지나게 푼 답안들이 많다.
근데 개인적으로는 굳이 reduce를 안써도 되는 부분에서도 사용하는 것은 가독성도 구리고 보는 사람으로 하여금 친절한 코드는 아니라고 생각한다.

어쨋든 reduce 자체도 for문을 기반으로 만들어진 고수준 API라고 할 수 있으니 근본인 for문, if문에게 감사하자