JavaScript에서는 reduce() 메서드를 활용하면 객체 배열을 특정 키(id, age 등)를 기준으로 손쉽게 그룹화할 수 있습니다. 이 글에서는 실제 예제 코드와 함께 그룹화 과정을 단계별로 살펴보겠습니다.
groupBy 함수의 작동 원리
그룹화의 핵심은 reduce()입니다. reduce()는 배열의 각 요소를 순회하면서 누적 결과값(accumulator)을 만들어내는 메서드로, 여기서는 빈 객체({})를 초기값으로 사용해 키별로 객체들을 분류합니다.
핵심 로직인 (result[obj[key]] = result[obj[key]] || []).push(obj) 부분을 살펴보면 다음과 같이 동작합니다.
- 현재 객체의 키 값(예: 나이 18)에 해당하는 배열이 이미 존재하면 그 배열을 재사용하고,
- 존재하지 않으면 새로운 빈 배열(
[])을 생성한 뒤, - 해당 배열에 현재 객체를 추가(push)합니다.
예제 코드
다음은 사람 객체 배열을 나이(age)를 기준으로 그룹화하는 전체 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>group the array of objects by Id in JavaScript</h1>
<div class="result">
{ name: 'Rohan', age: 18 }, { name: 'Mohan', age: 20 }, { name: 'Shawn',
age: 18 }, { name: 'Michael', age: 18 }, { name: 'David', age: 20 }
</div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to sort the above object based on peoples age
</h3>
<script>
let resEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
let BtnEle = document.querySelector(".Btn");
const people = [
{ name: "Rohan", age: 18 },
{ name: "Mohan", age: 20 },
{ name: "Shawn", age: 18 },
{ name: "Michael", age: 18 },
{ name: "David", age: 20 },
];
let groupBy = (array, key) => {
return array.reduce((result, obj) => {
(result[obj[key]] = result[obj[key]] || []).push(obj);
return result;
}, {});
};
let a = groupBy(people, "age");
BtnEle.addEventListener("click", () => {
console.log(a);
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 화면에 다음과 같이 객체 목록이 표시됩니다.
'CLICK HERE' 버튼을 클릭한 뒤 브라우저 개발자 도구(F12)의 콘솔(Console) 탭을 확인하면, 나이를 기준으로 그룹화된 결과를 볼 수 있습니다.
콘솔에는 다음과 같은 구조로 데이터가 그룹화되어 출력됩니다.
{
18: [
{ name: "Rohan", age: 18 },
{ name: "Shawn", age: 18 },
{ name: "Michael", age: 18 }
],
20: [
{ name: "Mohan", age: 20 },
{ name: "David", age: 20 }
]
}정리
이처럼 reduce()와 간단한 함수 하나만으로 객체 배열을 원하는 키를 기준으로 자유롭게 그룹화할 수 있습니다. 이 방식은 id, 카테고리, 날짜 등 어떤 속성이든 동일하게 적용할 수 있어, 데이터를 정리하거나 통계를 낼 때 매우 유용하게 활용됩니다.