Object.groupBy() — 배열 그룹화

지난 글에서 structuredClone()을 살펴봤습니다. 이번에는 ES2024에 추가된 **Object.groupBy()**와 **Map.groupBy()**를 다룹니다. 배열을 특정 기준으로 분류하는 작업을 위해 매번 reduce()를 직접 구현하던 번거로움을 해결하는 내장 메서드입니다.

배열 그룹화란?

배열 요소를 어떤 기준(카테고리, 상태, 범위 등)에 따라 분류해 각 그룹별 배열로 묶는 작업입니다.

// 기존 방식 — reduce로 직접 구현
const grouped = items.reduce((acc, item) => {
  const key = item.status;
  (acc[key] ??= []).push(item);
  return acc;
}, {});

매번 이 패턴을 반복하는 대신, Object.groupBy()가 같은 작업을 선언적으로 처리합니다.

Object.groupBy()

Object.groupBy(iterable, callbackFn) 형식으로 사용합니다. 콜백이 반환하는 문자열 키를 기준으로 요소를 분류하고, null 프로토타입을 가진 객체를 반환합니다.

const products = [
  { name: '노트북', category: '전자제품', price: 1_200_000 },
  { name: '키보드', category: '전자제품', price: 80_000   },
  { name: '책상',   category: '가구',    price: 350_000   },
  { name: '의자',   category: '가구',    price: 200_000   },
  { name: '마우스', category: '전자제품', price: 40_000   },
];

const byCategory = Object.groupBy(products, p => p.category);

byCategory['전자제품'];
// [노트북, 키보드, 마우스]
byCategory['가구'];
// [책상, 의자]

Map.groupBy()

키가 문자열이 아닌 임의 타입(객체, 숫자 등)이어야 할 때는 Map.groupBy()를 사용합니다.

const EXPENSIVE = { label: '고가', min: 500_000 };
const MIDRANGE  = { label: '중가', min: 100_000 };
const BUDGET    = { label: '저가', min: 0        };

const byPriceRange = Map.groupBy(products, p => {
  if (p.price >= 500_000) return EXPENSIVE;
  if (p.price >= 100_000) return MIDRANGE;
  return BUDGET;
});

byPriceRange.get(EXPENSIVE); // [노트북]
byPriceRange.get(MIDRANGE);  // [책상]
byPriceRange.get(BUDGET);    // [키보드, 의자, 마우스]

null 프로토타입 반환의 의미

Object.groupBy()가 반환하는 객체는 Object.create(null)로 만들어진 null 프로토타입 객체입니다.

const g = Object.groupBy(['a', 'b', 'a'], x => x);
Object.getPrototypeOf(g); // null

// 주의: hasOwnProperty 같은 메서드 없음
g.hasOwnProperty; // undefined
// Object.hasOwn()을 사용해야 함
Object.hasOwn(g, 'a'); // true

다양한 그룹화 기준

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 홀수/짝수
const byParity = Object.groupBy(numbers,
  n => n % 2 === 0 ? 'even' : 'odd'
);
// { even: [2,4,6,8,10], odd: [1,3,5,7,9] }

// 범위별
const byRange = Object.groupBy(numbers, n => {
  if (n <= 3)  return 'low';
  if (n <= 7)  return 'mid';
  return 'high';
});
// { low: [1,2,3], mid: [4,5,6,7], high: [8,9,10] }

이터러블 지원

두 메서드는 배열뿐만 아니라 Set, Map, 제너레이터 등 모든 이터러블을 첫 번째 인자로 받습니다.

const set = new Set(['apple', 'banana', 'avocado', 'blueberry']);

const byFirstLetter = Object.groupBy(set, s => s[0]);
// { a: ['apple', 'avocado'], b: ['banana', 'blueberry'] }

지원 환경

Chrome 117+, Firefox 119+, Safari 17.4+, Node.js 21+에서 지원됩니다. 이전 환경에서는 core-js의 폴리필 또는 Array.prototype.reduce()로 대체할 수 있습니다.

---

지난 글: structuredClone()

다음 글: 배열 불변 메서드 (toSorted, toReversed, with)

읽어주셔서 감사합니다. 😊