JavaScript에서 배열의 원소들을 그룹핑하는 방법들

그룹핑의 필요성

웹 애플리케이션을 개발하다 보면 데이터를 특정 기준에 따라 그룹화해야 하는 상황이 자주 발생한다. 예를 들어 게시판에서 사용자들이 작성한 글을 카테고리별로 묶어서 보여주거나, 사용자 로그를 시간대별로 분류해서 보여줘야 하는 경우가 있다. 이 글에서는 JavaScript에서 배열의 원소들을 그룹핑하는 다양한 방법들을 소개한다.

 

방법 1. Lodash의 groupBy 함수 이용하기

JavaScript에서 널리 사용되는 라이브러리인 Lodash는 배열의 원소들을 그룹화할 수 있는 groupBy 함수를 제공한다. 이 함수는 데이터를 특정 기준에 따라 손쉽게 그룹핑할 수 있는 직관적인 인터페이스를 제공한다.

// 인터페이스
_.groupBy(데이터, 함수 혹은 프로퍼티키)

// 방법 1)
_.groupBy(posts, (posts) => posts.category);

// 방법 2)
_.groupBy(posts, "category");

다음은 Lodash를 이용해서 배열의 원소들을 그룹핑하는 예제이다.

 

See the Pen Lodash를 이용해서 배열의 원소들을 그룹핑하기 by Ohnim (@ohnim) on CodePen.

 

Lodash의 groupBy 함수는 데이터를 쉽게 그룹핑 할 수 있게 해 준다. 그러나 외부 라이브러리 사용이 제한되거나, 굳이 외부 라이브러리를 도입하고 싶지 않다면 JavaScript에서 제공하는 기본 메서드들을 활용해 직접 그룹핑 기능을 구현할 수 있다.

 

방법 2. 배열의 reduce 메서드 이용하기

Lodash와 같은 외부 러이브러리르 사용하지 않고도 JavaScript에서 기본으로 제공하는 메서드인 reduce를 활용하면 배열의 원소들을 그룹핑할 수 있다. 이 방법은 외부 라이브러리의 의존성을 줄이면서도, 순수 JavaScript만으로 데이터를 그룹화할 수 있다는 장점이 있다.

 

See the Pen reduce 메서드를 이용해서 배열의 원소들을 그룹핑하기 by Ohnim (@ohnim) on CodePen.

 

방법 3. Object.groupBy 메서드 이용하기

JavaScript의 최신 표준인 ECMAScript 2023에서는 Object.groupBy라는 메서드가 새롭게 추가됐다. 이 메서드는 Lodash의 groupBy와 유사한 인터페이스를 제공하며, 데이터를 특정 기준에 따라 그룹핑할 수 있게 해 준다. reduce와 마찬가지로 Object.groupBy는 JavaScript 표준에 포함된 기능이기 때문에 외부 라이브러리에 의존하지 않고 사용할 수 있는 장점이 있다.

 

See the Pen Object.groupBy 메서드를 이용해서 배열의 원소들을 그룹핑하기 by Ohnim (@ohnim) on CodePen.

 

다만, 이 메서드는 비교적 최신 스펙에 속하기 때문에 지원하지 않는 브라우저들이 있을 수 있다. 따라서, 프로젝트에서 이 메서드를 사용하기 전에 프로젝트의 타겟타깃 브라우저들이 Object.groupBy를 지원하는지 반드시 확인해야 한다. 만약 지원하지 않는 타깃 브라우저가 있다면, core-js와 같은 폴리필을 적용해야 한다.

 

방법 4. Map.groupBy 메서드 이용하기

JavaScript의 최신 표준인 ECMAScript 2023에서는 Map.groupBy라는 메서드도 새롭게 추가됐다. 이 메서드는 Object.groupBy와 비슷한 방식으로 동작하지만, 그룹핑된 데이터를 Map 객체로 반환한다는 점에서 차이가 있다. Map은 다양한 편의 메서드를 제공하므로 그룹화된 데이터를 더욱 효율적으로 관리할 수 있다. 특히 Symbol이나 String 타입만 키로 사용할 수 있는 Object와는 다르게 클래스나 Object도 키로 사용할 수 있어, 복잡한 데이터를 다룰 때 유용하다.

 

See the Pen Map.groupBy 메서드를 이용해서 배열의 원소들을 그룹핑하기 by Ohnim (@ohnim) on CodePen.

 

Map.groupBy도 Object.groupBy와 마찬가지로 비교적 최신 스펙이기 때문에 지원하는 브라우저를 확인한 뒤, 필요하다면 폴리필을 적용해야 한다.

 

결론

이번 글에서는 JavaScript에서 배열의 원소들을 그룹핑하는 다양한 방법을 살펴보앗다. Lodash와 같은 외부 라이브러리를 사용하면 손쉽게 데이터를 그룹핑할 수 있지만, JavaScript에서 기본적으로 제공하는 메서드들을 활용해서 데이터를 그룹핑하는 기능을 직접 구현할 수도 있다.

 

특히 ECMAScript 2023에 새롭게 추가된 Object.groupBy와 Map.groupBy 메서드는 Lodash와 비슷한 인터페이스를 제공하며, 표준 기능만드로도 효율적으로 데이터를 그룹화할 수 있는 방법을 제공한다.

 

꼭 어떤 방법을 사용해야 한다고 정해진 것이 아니므로, 프로젝트의 요구사항에 따라 적합한 그룹핑 방법을 선택하면 될 것 같다.