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

JavaScript를 다루다 보면 객체 배열 안에 있는 데이터를 특정 속성 값을 기준으로 묶어야 하는 경우가 자주 발생합니다. 예를 들어 여러 자동차 정보가 담긴 배열이 있다고 가정해 봅시다.

문제 상황

다음과 같이 자동차 제조사(company)와 차종(type) 정보를 담은 객체 배열이 있습니다.

const cars = [{
    company: 'Honda',
    type: 'SUV'
}, {
    company: 'Hyundai',
    type: 'Sedan'
}, {
    company: 'Suzuki',
    type: 'Sedan'
}, {
    company: 'Audi',
    type: 'Coupe'
}, {
    company: 'Tata',
    type: 'SUV'
}, {
    company: 'Morris Garage',
    type: 'Hatchback'
}, {
    company: 'Honda',
    type: 'SUV'
}, {
    company: 'Tata',
    type: 'Sedan'
}, {
    company: 'Honda',
    type: 'Hatchback'
}];

이 배열에서 type 속성 값이 같은 객체들이 서로 붙어 있도록 그룹화하는 프로그램을 작성해야 합니다. 즉, 같은 차종(Coupe, Hatchback, Sedan, SUV)끼리 연속되게 정렬하는 것이 목표입니다.

해결 방법

가장 간단한 접근 방식은 배열을 type 속성을 기준으로 정렬(sort)하는 것입니다. 정렬 조건에 대소문자 구분 없이 비교하도록 toLowerCase() 메서드를 활용하면, type 값이 알파벳 순서로 정렬되면서 동일한 타입의 객체들이 자연스럽게 한데 모이게 됩니다.

정렬 함수 작성

비교 함수(comparator)는 두 객체의 type 속성을 소문자로 변환한 뒤 서로 비교하여 순서를 결정합니다.

전체 코드

const cars = [{
    company: 'Honda',
    type: 'SUV'
}, {
    company: 'Hyundai',
    type: 'Sedan'
}, {
    company: 'Suzuki',
    type: 'Sedan'
}, {
    company: 'Audi',
    type: 'Coupe'
}, {
    company: 'Tata',
    type: 'SUV'
}, {
    company: 'Morris Garage',
    type: 'Hatchback'
}, {
    company: 'Honda',
    type: 'SUV'
}, {
    company: 'Tata',
    type: 'Sedan'
}, {
    company: 'Honda',
    type: 'Hatchback'
}];

const sorter = (a, b) => {
    return a.type.toLowerCase() > b.type.toLowerCase() ? 1 : -1;
}

cars.sort(sorter);
console.log(cars);

실행 결과

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

[
    { company: 'Audi', type: 'Coupe' }, { company: 'Honda', type: 'Hatchback' }, { company: 'Morris Garage', type: 'Hatchback' }, { company: 'Tata', type: 'Sedan' }, { company: 'Suzuki', type: 'Sedan' },
    { company: 'Hyundai', type: 'Sedan' }, { company: 'Honda', type: 'SUV' }, { company: 'Tata', type: 'SUV' }, { company: 'Honda', type: 'SUV' }
]

코드 설명

• sorter 함수는 두 객체 a와 b의 type 값을 모두 소문자로 변환하여 비교합니다. 대소문자가 섞여 있어도 일관된 결과를 얻을 수 있습니다.
• a.type.toLowerCase() > b.type.toLowerCase()가 참이면 1을 반환하여 b가 앞으로 오고, 그렇지 않으면 -1을 반환하여 a가 앞에 위치합니다.
• Array.prototype.sort()는 원본 배열을 직접 변경(in-place)한다는 점에 유의하세요. 원본을 보존하고 싶다면 먼저 [...cars]처럼 복사본을 만든 뒤 정렬하는 것이 좋습니다.

결과를 보면 Coupe → Hatchback → Sedan → SUV 순으로 type이 알파벳 순서에 따라 정렬되었고, 동일한 type을 가진 객체들이 서로 인접하게 배치된 것을 확인할 수 있습니다.