JavaScript에서 객체 배열을 속성 기준으로 그룹화하는 방법

과일과 채소에 대한 정보를 담고 있는 객체 배열이 있다고 가정해 보겠습니다.

const arr = [
    {food: 'apple', type: 'fruit'},
    {food: 'potato', type: 'vegetable'},
    {food: 'banana', type: 'fruit'},
];

이러한 배열을 입력으로 받아 처리하는 자바스크립트 함수를 작성해야 합니다.

작성할 함수는 객체들이 가진 "type" 속성을 기준으로 배열 내 객체들을 그룹화해야 합니다. 즉, "fruit" 타입의 객체들은 하나로 묶고, "vegetable" 타입의 객체들은 별도로 묶어주는 것입니다.

예제 코드

이를 구현한 코드는 다음과 같습니다.

const arr = [
    {food: 'apple', type: 'fruit'},
    {food: 'potato', type: 'vegetable'},
    {food: 'banana', type: 'fruit'},
];
const transformArray = (arr = []) => {
    const res = [];
    const map = {};
    let i, j, curr;
    for (i = 0, j = arr.length; i < j; i++) {
        curr = arr[i];
        if (!(curr.type in map)) {
            map[curr.type] = {type: curr.type, foods: []};
            res.push(map[curr.type]);
        };
        map[curr.type].foods.push(curr.food);
    };
    return res;
};
console.log(transformArray(arr));

출력 결과

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

[
    { type: 'fruit', foods: [ 'apple', 'banana' ] },
    { type: 'vegetable', foods: [ 'potato' ] }
]

코드 동작 원리

이 함수의 핵심 로직은 다음과 같습니다.

1. 결과 배열과 맵 객체 초기화: 최종 그룹 정보를 담을 res 배열과, 이미 생성된 그룹을 빠르게 조회하기 위한 map 객체를 준비합니다.

2. 배열 순회 및 그룹 생성: 배열의 각 요소를 순회하면서 해당 객체의 type 값이 map에 존재하지 않으면, 새로운 그룹 객체 {type, foods: []}를 만들어 res에 추가합니다.

3. 음식 이름 추가: 현재 객체의 food 값을 해당 타입 그룹의 foods 배열에 push하여 그룹화를 완성합니다.

이처럼 해시 맵(객체)을 활용하면 각 요소를 한 번만 순회하면서 O(n) 시간 복잡도로 효율적인 그룹화가 가능합니다. 실무에서는 reduce() 메서드나 ES2024에 도입된 Object.groupBy()를 사용해 더욱 간결하게 구현할 수도 있습니다.