자바스크립트에서 배열을 다룰 때, 때로는 특정 기준에 따라 요소들을 그룹화하고 정렬해야 할 때가 있습니다. 이번 블로그에서는 배열 요소를 그룹화하고 정렬하는 방법에 대해 알아보겠습니다.

그룹화하기

그룹화 기준 속성 정의하기

먼저, 배열 요소를 그룹화하기 위해 그룹화 기준을 정의해야 합니다. 예를 들어, 사용자 객체 배열에서 사용자의 나이를 기준으로 그룹을 지어야 한다고 가정해 봅시다.

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

위의 예시에서는 age 속성을 그룹화 기준으로 사용하겠습니다.

그룹화하기

그룹화 기준에 따라 배열 요소들을 그룹화하는 방법은 다양합니다. 여기서는 reduce 메서드를 활용하여 그룹화해 보겠습니다.

const groupedUsers = users.reduce((groups, user) => {
  const age = user.age;
  if (!groups[age]) {
    groups[age] = [];
  }
  groups[age].push(user);
  return groups;
}, {});

위의 코드에서는 reduce 메서드를 사용하여 groups라는 빈 객체를 초기값으로 지정하고, 각 사용자를 그룹화 기준(age)에 따라 분류합니다. 그리고 해당 그룹에 속한 사용자를 배열에 추가합니다.

그룹화 결과 확인하기

이제 그룹화된 결과를 확인해보겠습니다.

console.log(groupedUsers);

출력 결과는 다음과 같을 것입니다.

{
  25: [
    { name: 'Alice', age: 25 },
    { name: 'Charlie', age: 25 }
  ],
  30: [
    { name: 'Bob', age: 30 }
  ],
  35: [
    { name: 'Dave', age: 35 }
  ]
}

위의 출력 결과를 보면, age 속성을 기준으로 각 그룹이 생성되었다는 것을 확인할 수 있습니다.

정렬하기

그룹화한 배열 요소들을 특정 기준에 따라 정렬하려면, sort 메서드를 사용할 수 있습니다. 예를 들어, 그룹화된 배열을 나이(age) 오름차순으로 정렬하고 싶다면 다음과 같이 할 수 있습니다.

const sortedGroups = Object.entries(groupedUsers).sort(([ageA, usersA], [ageB, usersB]) => {
  return ageA - ageB;
});

위의 코드에서는 Object.entries를 사용하여 그룹화된 객체를 배열로 변환하고, 이후 sort 메서드를 사용하여 정렬합니다. 사용되는 콜백 함수에서는 나이(age)를 비교하여 오름차순으로 정렬하도록 합니다.

결론

이번 블로그에서는 자바스크립트 배열 요소를 특정 기준으로 그룹화하고 정렬하는 방법에 대해 알아보았습니다. reduce 메서드를 사용하여 그룹화한 후, sort 메서드를 사용하여 요소들을 정렬할 수 있습니다. 이러한 기법을 사용하면 배열 요소를 효율적으로 관리하고 다양한 작업에 활용할 수 있습니다.