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

여러 자동차 정보를 담고 있는 객체 배열이 있다고 가정해 보겠습니다. 배열은 다음과 같이 구성되어 있습니다.

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 속성의 값이 같은 객체들이 서로 인접하도록 그룹화하는 프로그램을 작성해야 합니다. 즉, Sedan끼리, SUV끼리 모아서 배치하는 것이 목표입니다.

해결 방법: sort() 메서드 활용

가장 간단한 방법은 type 속성을 기준으로 배열을 정렬하는 것입니다. 정렬을 수행하면 type 값이 알파벳 순서로 배치되면서, 자연스럽게 같은 타입을 가진 객체들이 한곳에 모이게 됩니다.

JavaScript의 Array.prototype.sort() 메서드에 비교 함수를 전달하면 원하는 기준으로 정렬할 수 있습니다. 이때 대소문자 차이로 인한 정렬 오류를 방지하기 위해 toLowerCase()로 문자열을 변환한 뒤 비교하는 것이 안전합니다.

전체 코드는 다음과 같습니다.

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' }
]

결과 분석 및 참고 사항

출력 결과를 보면 Coupe → Hatchback → Sedan → SUV 순으로 type이 알파벳 순서대로 정렬되어 있으며, 같은 type을 가진 객체들이 함께 배치된 것을 확인할 수 있습니다.

다만 몇 가지 유의할 점이 있습니다. 첫째, sort()는 원본 배열을 직접 변경하므로 원본을 유지해야 한다면 [...cars].sort(sorter)처럼 복사본을 만들어 사용하는 것이 좋습니다. 둘째, 이 방식은 단순히 그룹별로 인접하게 배치할 뿐, 그룹 내부의 순서(예: 같은 Sedan 중 Tata, Suzuki, Hyundai의 순서)는 보장하지 않습니다. 그룹 내 순서까지 제어하려면 비교 함수에 회사명 등 추가 조건을 넣거나, reduce()를 활용해 객체 형태로 그룹핑하는 방법을 고려할 수 있습니다.