자바스크립트에서 데이터 그룹화하기: groupBy() 활용법

자바스크립트를 이용하여 데이터를 처리하는 과정에서도 데이터를 특정 기준에 따라 그룹화하는 작업이 자주 필요합니다. 이번 포스팅에서는 자바스크립트에서 데이터를 효과적으로 그룹화하는 방법을 소개하겠습니다.

특히 최신 자바스크립트에서 사용할 수 있는 Object.groupBy()와 Map.groupBy()를 활용하여 간단하고

가독성 높은 코드를 작성하는 방법에 대해 알아보겠습니다.

기존 데이터 그룹화 방법

우선 데이터를 그룹화하는 작업을 하기 위해 reduce() 함수나 반복문을 이용한 기존 방법은 코드가 길고

유지보수가 어렵다는 단점이 있었습니다.

예를 들어, 여러 사용자의 이름, 나이, 국가 정보를 가진 배열이 있을 때, 국가별로 사용자를 분류하고

싶다고 가정해봅시다.

const users = [
  { name: "John", age: 25, country: "US" },
  { name: "Jane", age: 30, country: "KR" },
  { name: "Robin", age: 22, country: "CA" },
  { name: "Doe", age: 13, country: "US" },
  { name: "Smith", age: 20, country: "KR" },
];

const usersByCountry = users.reduce((acc, user) => {
  const country = user.country;
  if (!acc[country]) {
    acc[country] = [];
  }
  acc[country].push(user);
  return acc;
}, {});

console.log(usersByCountry);

 

위 코드는 국가별로 사용자 정보를 그룹화하지만, 코드가 복잡하고 반복적인 패턴이 많아 가독성이 떨어집니다.

Object.groupBy()를 이용한 데이터 그룹화

최신 자바스크립트에서는 Object.groupBy()를 이용하여 더 간결하고 이해하기 쉬운 코드로 데이터를

그룹화할 수 있습니다. 다음은 같은 작업을 groupBy()를 이용하여 간단하게 해결하는 방법입니다.

const users = [
  { name: "John", age: 25, country: "US" },
  { name: "Jane", age: 30, country: "KR" },
  { name: "Robin", age: 22, country: "CA" },
  { name: "Doe", age: 13, country: "US" },
  { name: "Smith", age: 20, country: "KR" },
];

const usersByCountry = Object.groupBy(users, user => user.country);

console.log(usersByCountry);

 

Object.groupBy()를 사용하면 간결하게 데이터를 그룹화할 수 있으며, 코드의 가독성도 크게 향상됩니다.

이 메서드는 특정 기준으로 데이터를 쉽게 분류할 수 있는 유용한 도구로, 데이터를 효율적으로 처리하고

유지보수하기 쉬운 코드를 작성하는 데 큰 도움이 됩니다.

다양한 기준으로 그룹화하기

groupBy() 메서드는 분류 기준이 되는 콜백 함수를 자유롭게 정의할 수 있어, 여러 가지 기준으로 데이터를 그룹화할 수 있습니다. 예를 들어, 나이를 기준으로 "YOUNG"과 "OLD"로 사용자를 분류할 수 있습니다.

const usersByAgeGroup = Object.groupBy(users, user => user.age < 25 ? "YOUNG" : "OLD");

console.log(usersByAgeGroup);

 

이 코드는 나이를 기준으로 "YOUNG"과 "OLD"로 사용자를 분류하여 데이터를 그룹화합니다. 이러한 방식으로 다양한 기준을 적용해 데이터를 쉽게 그룹화할 수 있습니다.

Map.groupBy()를 이용한 데이터 그룹화

Map.groupBy()는 Object.groupBy()와 유사하지만, 결과를 Map 객체에 담는다는 점에서 차이가 있습니다.

Map은 객체와 달리 키로 문자열뿐 아니라 다른 자료형도 사용할 수 있어 좀 더 유연하게 그룹화를 처리할 수 있습니다.

const usersByCountryMap = Map.groupBy(users, user => user.country);

console.log(usersByCountryMap);

 

이렇게 하면 각 국가를 키로, 해당 국적의 사용자 목록을 값으로 갖는 Map이 생성됩니다. Map을 활용하면 키로 다양한 자료형을 사용할 수 있어 더욱 유연한 데이터 처리가 가능합니다.