자바스크립트에서 배열의 요소를 특정 기준으로 그룹핑하는 방법은 다양한 상황에서 유용합니다. 그룹핑은 데이터를 카테고리화하거나 통계를 생성하는 데 사용될 수 있습니다. 이 블로그 포스트에서는 자바스크립트에서 배열의 요소를 특정 기준으로 그룹핑하는 몇 가지 방법을 살펴보겠습니다.
1. reduce() 메소드로 그룹핑하기
reduce() 메소드는 배열의 모든 요소를 순회하면서 하나의 값을 반환하는데 사용됩니다. 이를 활용하여 배열의 요소를 특정 기준으로 그룹핑할 수 있습니다.
const data = [
{ name: 'John', category: 'A' },
{ name: 'Jane', category: 'B' },
{ name: 'Bob', category: 'A' },
{ name: 'Alice', category: 'C' },
{ name: 'Mike', category: 'B' }
];
const groupedData = data.reduce((acc, item) => {
(acc[item.category] = acc[item.category] || []).push(item);
return acc;
}, {});
console.log(groupedData);
위 예제에서는 reduce() 메소드를 사용하여 data 배열을 순회하면서 category 값을 기준으로 그룹을 만들었습니다. acc 매개변수는 누산기로, 초기 값으로 빈 객체 {}를 전달했습니다. acc[item.category]는 해당 카테고리의 배열을 나타내고, push() 메소드를 사용하여 현재 아이템을 해당 카테고리의 배열에 추가합니다.
콘솔에 출력되는 groupedData는 다음과 같은 형태로 나타납니다:
{
A: [
{ name: 'John', category: 'A' },
{ name: 'Bob', category: 'A' }
],
B: [
{ name: 'Jane', category: 'B' },
{ name: 'Mike', category: 'B' }
],
C: [
{ name: 'Alice', category: 'C' }
]
}
2. Map 객체로 그룹핑하기
ES6에서 도입된 Map은 키-값 쌍을 저장하는 자료구조로, 배열의 요소를 그룹화하는 데에도 사용할 수 있습니다. Map 객체를 활용하여 배열의 요소를 특정 기준으로 그룹핑할 수 있습니다.
const data = [
{ name: 'John', category: 'A' },
{ name: 'Jane', category: 'B' },
{ name: 'Bob', category: 'A' },
{ name: 'Alice', category: 'C' },
{ name: 'Mike', category: 'B' }
];
const groupedData = new Map();
data.forEach(item => {
if (!groupedData.has(item.category)) {
groupedData.set(item.category, []);
}
groupedData.get(item.category).push(item);
});
console.log(groupedData);
위 예제에서는 Map 객체를 활용하여 배열의 요소를 그룹화했습니다. forEach() 메소드를 사용하여 배열을 순회하면서, Map 객체에 category를 키로 하고 해당 그룹을 값으로 하는 키-값 쌍을 추가했습니다. 이미 키가 존재하는 경우에는 해당 그룹 배열을 가져와 push() 메소드로 현재 아이템을 추가합니다.
콘솔에 출력되는 groupedData는 다음과 같은 형태로 나타납니다:
Map(3) {
'A' => [
{ name: 'John', category: 'A' },
{ name: 'Bob', category: 'A' }
],
'B' => [
{ name: 'Jane', category: 'B' },
{ name: 'Mike', category: 'B' }
],
'C' => [
{ name: 'Alice', category: 'C' }
]
}
3. Lodash 라이브러리의 groupBy() 함수로 그룹핑하기
Lodash는 유용한 유틸리티 함수를 제공하는 자바스크립트 라이브러리로, 그룹핑을 위한 groupBy() 함수도 포함되어 있습니다. groupBy() 함수를 사용하여 배열의 요소를 특정 기준으로 그룹핑할 수 있습니다.
const _ = require('lodash');
const data = [
{ name: 'John', category: 'A' },
{ name: 'Jane', category: 'B' },
{ name: 'Bob', category: 'A' },
{ name: 'Alice', category: 'C' },
{ name: 'Mike', category: 'B' }
];
const groupedData = _.groupBy(data, 'category');
console.log(groupedData);
위 예제에서는 Lodash 라이브러리를 사용하여 groupBy() 함수로 배열의 요소를 category를 기준으로 그룹화했습니다. groupBy() 함수는 첫 번째 매개변수로 그룹핑할 배열을, 두 번째 매개변수로 그룹화할 기준을 전달합니다.
콘솔에 출력되는 groupedData는 다음과 같은 형태로 나타납니다:
{
A: [
{ name: 'John', category: 'A' },
{ name: 'Bob', category: 'A' }
],
B: [
{ name: 'Jane', category: 'B' },
{ name: 'Mike', category: 'B' }
],
C: [
{ name: 'Alice', category: 'C' }
]
}
결론
자바스크립트에서 배열의 요소를 특정 기준으로 그룹핑하는 방법은 reduce() 메소드, Map 객체, Lodash 라이브러리의 groupBy() 함수 등 다양한 방법이 존재합니다. 이러한 그룹핑 기능은 데이터 분석, 통계, 그룹화된 데이터 처리 등 다양한 애플리케이션에서 유용하게 활용될 수 있습니다. 각 방법들을 익히고 원하는 방식에 맞게 활용할 수 있도록 실습을 통해 익숙해지기를 권장합니다.