[JS] 자바스크립트 reduce() 메서드 활용 예시 모음

Array.reduce() 메서드는 배열에 있는 각 요소에 콜백 함수를 실행하여 누적된 계산 결과를 하나의 값으로 반환한다. 자바스크립트에서 제공하는 filter(), map() 등의 배열 메서드는 모두 reduce()로 구현할 수 있고, 이 외에도 다양한 활용 방법이 있기 때문에 개인적으로 가장 자주 사용하는 배열 메서드다. reduce() 메서드의 구문은 아래와 같다.

reduce(callbackFn, initialValue?)

 

1. callbackFn 콜백 파라미터
   • accumulator : 이전 callbackFn 반환값
     • 초기값 지정 시 콜백을 처음 호출했을 때 값 : initialValue
     • 초기값 미지정시 콜백을 처음 호출했을 때 값 : array[0]
   • currentValue : 현재 순회하고 있는 값
     • 초기값 지정 시 콜백을 처음 호출했을 때 값 : array[0]
     • 초기값 미지정시 콜백을 처음 호출했을 때 값 : array[1]
   • currentIndex : 현재 순회하고 있는 값의 인덱스
   • array : reduce를 호출한 배열
2. initialValue (초기값) : callbackFn 콜백을 처음 호출할 때 accumulator에 사용할 초기값. 미지정시 배열(array) 첫 번째 인자를 초기값으로 사용. 초기값 지정시 배열 첫 번째 요소는 순회에 포함 안 함.

 

 

숫자 더하기 | Summing Numbers

---

reduce() 메서드의 가장 기본적인 사용 예시. 숫자로 이뤄진 배열이 주어졌을 때 모든 수를 더한 값을 반환한다.

const odds = [1, 3, 5, 7, 9, 11];
const sumOfOdds = odds.reduce((acc, cur) => acc + cur);
console.log(sumOfOdds); // 36

 

 

배열 펼치기 | Flattening Arrays

---

Array.flat()은 중첩된 배열을 펼쳐서 단일 배열로 만드는 메서드다. reduce()를 이용하면 flat() 메서드와 동일하게 구현할 수 있다.

const nestedArray = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = nestedArray.reduce((acc, cur) => acc.concat(cur), []);
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]

 

위 예시는 기본적으로 1 depth만 펼칠 수 있다. 2 depth 이상 중첩된 배열이라면 재귀를 이용하면 된다.

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

const deepFlat = (arr) => {
  return arr.reduce((acc, cur) => {
    return acc.concat(Array.isArray(cur) ? deepFlat(cur) : cur);
  }, []);
};

const flattenedArray = deepFlat(nestedArray);
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]

 

 

객체 그룹핑 | Grouping Objects

---

객체를 요소로 갖는 배열에서, 특정 프로퍼티를 기준으로 그룹핑(Grouping) 해야 하는 상황을 자주 접한다. 예를 들어 아래처럼 age 연령별로 그룹을 나누는 상황을 생각해 볼 수 있다.

// 원본 배열
[
  { name: 'A', age: 20 },
  { name: 'B', age: 30 },
  { name: 'C', age: 20 },
  { name: 'D', age: 30 },
];

// 연령별로 그룹핑
{
  20: [
    { name: 'A', age: 20 },
    { name: 'C', age: 20 },
  ],
  30: [
    { name: 'B', age: 30 },
    { name: 'D', age: 30 },
  ],
};

 

초기값을 객체로 지정한 reduce()를 활용하면 간편하게 그룹핑할 수 있다. 각 age 키마다 배열을 생성하고, 현재 순회하는 객체의 age 속성에 해당하는 배열에 push 하는 방식으로 구현하면 된다.

const users = [
  { name: 'A', age: 20 },
  { name: 'B', age: 30 },
  { name: 'C', age: 20 },
  { name: 'D', age: 30 },
];

const groupByAge = users.reduce((acc, cur) => {
  const { age } = cur;
  if (!acc[age]) acc[age] = [];
  acc[age].push(cur);
  return acc;
}, {});

console.log(groupByAge);
/*
{
  20: [{ name: 'A', age: 20 }, { name: 'C', age: 20 }],
  30: [{ name: 'B', age: 30 }, { name: 'D', age: 30 }]
}
*/

 

참고로 객체 그룹핑은 ES15(ECMAScript 2024)부터 제공하는 groupBy() 메서드를 이용할 수도 있다. 이 메서드는 Chrome 117 버전, Node.js 21 버전 이후부터 사용할 수 있다(Baseline 2024).

const groupByAge = Object.groupBy(users, ({ age }) => age);
console.log(groupbyAge); // {20: Array(2), 30: Array(2)}

 

Browser compatibility via MDN

 

조회용 맵 | Lookup Maps

---

배열 각 요소가 객체이고, 각 객체는 고유한 id 프로퍼티를 가질 때, id로 빠르게 조회할 수 있는 Lookup 맵을 생성 해두면, 특정 id를 가진 요소에 O(1) 시간 복잡도로 빠르게 접근할 수 있다. 매번 find() 같은 메서드로 순회할 필요가 없기 때문에 성능 면에서 더 유리하다.

const products = [
  { id: 1, name: 'iPhone' },
  { id: 2, name: 'iPad' },
  { id: 3, name: 'iMac' },
];

const productMap = products.reduce((acc, cur) => {
  acc[cur.id] = cur;
  return acc;
}, {});

console.log(productMap);
/*
{
  1: { id: 1, name: 'iPhone' },
  2: { id: 2, name: 'iPad' },
  3: { id: 3, name: 'iMac' }
}
*/
console.log(productMap[3]); // { id: 3, name: 'iMac' }

 

 

횟수 계산 | Counting Occurrences

---

배열 내 특정 요소가 몇 개 있는지 계산할 때도 reduce() 메서드를 활용할 수 있다. 빈 객체를 초기값으로 지정하고, 각 요소를 객체 키로 사용하여 순회할 때마다 키에 해당하는 카운트를 1씩 증가하는 방식으로 구현한다.

const products = ['iPhone', 'iMac', 'MacBook', 'iPhone', 'iMac', 'iPhone'];

const productCounts = products.reduce((acc, cur) => {
  acc[cur] = (acc[cur] ?? 0) + 1;
  return acc;
}, {});

console.log(productCounts); // { iPhone: 3, iMac: 2, MacBook: 1 }

 

 

함수 합성 | Composing Functions

---

함수 합성은 여러 함수를 하나의 함수로 결합하여, 각 함수의 출력을 다음 함수의 입력으로 사용하는 방식으로 함수형 프로그래밍에서 자주 사용하는 패턴이다. 함수 합성은 f(g(x)) 와 같이 내부 함수부터 외부 함수 순으로 실행되는데 reduce() 메서드를 이용해서 구현할 수 있다.

const compose = (...funcs) => {
  return (x) => funcs.reduce((acc, fn) => fn(acc), x);
};

const increment = (x) => x + 1;
const square = (x) => x * x;
const decrement = (x) => x - 1;

// (x) => func.reduce((acc, f) => f(acc), x)
const composedFunc = compose(increment, square, decrement);
console.log(composedFunc(5)); // 35

 

위 예시는 아래처럼 함수를 실행한 것과 동일하다.

// imcrement -> square -> decrement
decrement(square(increment(5)));

 

만약 함수 실행 순서를 반대로 하고 싶다면 오른쪽 요소부터 순회하는 reduceRight() 메서드를 사용하면 된다.

 

 

중복 제거 | Deduplication

---

배열의 중복 제거는 Set() 객체를 이용하면 간단하게 수행할 수 있다. 하지만 특정 요소에 대해선 중복을 허용하는 등 추가적인 로직을 적용할 수 없다. 이런 작업 역시 reduce() 메서드를 활용할 수 있다.

const numbers = [1, 1, 2, 3, 2, 2, 6, 8, 8, 11, 12];
const allowList = new Set([8]); // 8은 중복 허용

const uniqueNumbers = numbers.reduce((res, num) => {
  if (!res.includes(num) || allowList.has(num)) res.push(num);
  return res;
}, []);

console.log(uniqueNumbers); // [ 1, 2, 3, 6, 8, 8, 11, 12 ]

 

 

평균 계산 | Calculating Average

---

reduce() 메서드를 이용해서 숫자로 이뤄진 배열의 평균값을 계산할 수도 있다. 각 요소를 순회하면서 모든 값을 더한 후, 마지막 요소를 순회할 땐 총합을 요소 개수로 나눈 결과를 반환하면 된다.

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

const average = rates.reduce((total, rate, idx, { length }) => {
  const sum = total + rate;
  if (idx === length - 1) return sum / length;
  return sum;
}, 0);

console.log(average); // 3

 

 

프로미스 체이닝 | Promise Chaining

---

자주 사용하는 패턴은 아니지만 reduce() 메서드를 이용해서 프로미스 체인을 구성할 수도 있다. 딜레이 시간을 나타내는 각 요소를 순회할 때마다 prevPromise.then(...) 프로미스를 반환하고, 이렇게 반환된 프로미스는 다음 순회의 prevPromise가 돼서 비동기 작업을 순차적으로 실행하도록 만든다.

const wait = (delay) => {
  return new Promise((resolve, _reject) => {
    console.log('[wait]', delay);
    setTimeout(() => resolve(delay), delay);
  });
};

const delayList = [1000, 2000, 3000, 4000];

delayList.reduce((prevPromise, curDelay) => {
  console.log('[reduce]', prevPromise, curDelay);
  // 순회마다 prevPromise.then(...) 프로미스를 반환하고, 다음 순회의 prevPromise가 된다
  return prevPromise.then((res) => {
    console.log('[then]', res);
    return wait(curDelay);
  });
}, Promise.resolve('start'));

/*
위 코드는 아래 프로미스 체인과 동일하다: 
Promise.resolve('start')
  .then(() => wait(1000))
  .then(() => wait(2000))
  .then(() => wait(3000))
  .then(() => wait(4000))
*/

 

콘솔 출력 결과는 아래와 같다.

 

모든 배열 메서드는 동기적으로 작동하기 때문에 콜백 내에서 비동기 작업을 수행해도 reduce는 프로미스가 처리될 때까지 기다리지 않고 다음 콜백을 실행시킨다. 즉, 콜백 내에서 수행한 비동기 작업은 reduce 메서드의 제어를 벗어나 별도로 처리된다.

 

비동기로 호출된 함수는 태스크 큐로 들어가는데, 큐에 있는 함수들은 콜스택이 비어있어야만 실행될 수 있다. 따라서 reduce 메서드의 모든 순회를 완료한 후에 비동기 작업들이 차례대로 실행된다.

 

💡then, catch, finally 같은 후속 처리 메서드는 항상 프로미스를 반환한다. 후속 처리 메서드 인자에 전달한 콜백 함수가 프로미스를 반환하면 그대로 반환하고, 프로미스가 아닌 값을 반환하면 해당 값을 암묵적으로 resolve 혹은 reject 해서 프로미스를 생성한 후 반환한다. 프로미스가 대기(pending) 상태이면 후속 처리 메서드는 프로미스가 처리되길 기다리고, 이미 처리(settled) 상태라면 핸들러는 즉각 실행된다.

 

 

Immutable vs Mutable

---

reduce 메서드는 크게 불변(Immutable)과 가변(Mutable) 2가지 사용 방식으로 사용할 수 있다. 불변은 이름 그대로 한 번 생성한 후 변경할 수 없는 값을, 가변은 생성한 후에도 변경할 수 있는 값을 의미한다. 자바스크립트에선 원시형 데이터 타입이 불변성을 가지며, 참조형은 기본적으로 가변성을 가진다.

 

불변적인 사용 방식은 요소를 순회할 때마다 기존 누적 값을 변경하지 않고 항상 새로운 객체나 배열을 생성하는 방식을 가리킨다. 기존 상태를 변경하지 않기 때문에 사이드 이펙트를 방지할 수 있고 가독성이 좋은 대신, 메모리 사용량이 증가할 수 있는 단점이 있다.

// Immutable
const doubledNumbers = [1, 2, 3].reduce((acc, cur) => {
  return [...acc, cur * 2];
}, []);

 

가변적인 사용 방식은 기존 누적 값을 직접 변경하여 결과를 만드는 방식을 가리킨다. 기존 객체나 배열을 직접 수정하기 때문에 메모리 사용량이 적은 대신, 코드 가독성이 떨어지고 사이드 이펙트가 발생할 가능성이 있다.

// Mutable
const doubledNumbers = [1, 2, 3].reduce((acc, cur) => {
  acc.push(cur * 2);
  return acc;
}, []);

 

불변성과 가변성 각각 장단점이 있기 때문에 어떤 방식이 항상 옳다고 단정할 수는 없다. 데이터 양이 많고 성능이 중요한 경우엔 가변성을 사용하는 게 유리할 수 있다. 반면, 코드 가독성이나 유지보수성이 중요하다면 불변성을 고려할 수 있다.

 

 

레퍼런스

---

• Array.reduce() is Goated 🐐✨
• Object.groupBy() - JavaScript | MDN
• Why Using Reduce() To Sequentially Resolve Promises Works | CSS-Tricks

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요