자바스크립트에서 객체 배열을 그룹화하는 가장 효율적인 방법

자바스크립트에서 객체 배열을 특정 키를 기준으로 그룹화할 때 가장 효율적인 방법은 reduce() 함수를 활용하는 것입니다.

reduce() 메서드는 배열의 각 요소에 대해 개발자가 직접 정의한 리듀서(reducer) 함수를 실행하며, 그 결과를 하나의 출력값으로 누적합니다. 이 특성을 활용하면 반복문 없이도 깔끔하게 데이터를 그룹별로 묶을 수 있습니다.

예제 코드

아래 예제는 사람 객체 배열을 나이(age)를 기준으로 그룹화하는 과정을 보여줍니다.

const people = [
    { name: 'Lee', age: 21 },
    { name: 'Ajay', age: 20 },
    { name: 'Jane', age: 20 }
];

function groupBy(objectArray, property) {
    return objectArray.reduce((acc, obj) => {
        const key = obj[property];
        if (!acc[key]) {
            acc[key] = [];
        }
        // 해당 키의 값에 객체를 추가
        acc[key].push(obj);
        return acc;
    }, {});
}

const groupedPeople = groupBy(people, 'age');
console.log(groupedPeople);

코드 설명

• groupBy 함수: 객체 배열과 기준이 될 속성 이름(property)을 매개변수로 받습니다.
• reduce의 초기값은 빈 객체({})이며, 각 순회마다 현재 객체의 속성 값을 키로 사용합니다.
• 해당 키가 아직 존재하지 않으면 빈 배열을 생성한 뒤, 객체를 해당 배열에 push 합니다.
• 모든 순회가 끝나면 키별로 객체들이 분류된 하나의 객체가 반환됩니다.

실행 결과

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

{
  20: [ { name: 'Ajay', age: 20 }, { name: 'Jane', age: 20 } ],
  21: [ { name: 'Lee', age: 21 } ]
}

결과를 보면 나이가 20살인 Ajay와 Jane이 하나의 그룹으로 묶이고, 21살인 Lee는 별도의 그룹으로 분류된 것을 확인할 수 있습니다. 이처럼 reduce()를 활용하면 추가 라이브러리 없이도 객체 배열을 원하는 기준으로 손쉽게 그룹화할 수 있습니다.