JavaScript에서 속성 값 기준으로 객체 배열 정렬하기

실무에서는 다음과 같이 여러 개의 객체를 담고 있는 배열을 자주 다루게 됩니다.

const homes = [
    {
        "h_id": "3",
        "city": "Dallas",
        "state": "TX",
        "zip": "75201",
        "price": "162500"
    }, {
        "h_id": "4",
        "city": "Bevery Hills",
        "state": "CA",
        "zip": "90210",
        "price": "319250"
    }, {
        "h_id": "5",
        "city": "New York",
        "state": "NY",
        "zip": "00010",
        "price": "962500"
    }
];

여기서 필요한 것은 이 배열의 객체들을 price(가격) 속성을 기준으로 오름차순 또는 내림차순으로 정렬하는 JavaScript 함수입니다.

예제

다음은 price 속성을 기준으로 배열을 정렬하는 전체 코드입니다.

const homes = [
{
    "h_id": "3",
    "city": "Dallas",
    "state": "TX",
    "zip": "75201",
    "price": "162500"
}, {
    "h_id": "4",
    "city": "Bevery Hills",
    "state": "CA",
    "zip": "90210",
    "price": "319250"
}, {
    "h_id": "5",
    "city": "New York",
    "state": "NY",
    "zip": "00010",
    "price": "962500"
}
];
const sortByPrice = arr => {
    arr.sort((a, b) => {
        return parseFloat(a.price) - parseFloat(b.price);
    });
};
sortByPrice(homes);
console.log(homes);

출력 결과

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

[
  {
    h_id: '3',
    city: 'Dallas',
    state: 'TX',
    zip: '75201',
    price: '162500'
  },
  {
    h_id: '4',
    city: 'Bevery Hills',
    state: 'CA',
    zip: '90210',
    price: '319250'
  },
  {
    h_id: '5',
    city: 'New York',
    state: 'NY',
    zip: '00010',
    price: '962500'
  }
]

코드 설명

정렬의 핵심은 배열의 sort() 메서드입니다. sort()는 비교 함수(comparator)를 인자로 받으며, 두 요소 a와 b를 비교한 반환값에 따라 순서를 결정합니다.

• 반환값이 음수이면 a가 b보다 앞에 위치합니다.
• 반환값이 양수이면 b가 a보다 앞에 위치합니다.
• 반환값이 0이면 순서가 유지됩니다.

예제에서 price 속성의 값은 문자열이므로, parseFloat()로 숫자로 변환한 뒤 차감하여 비교합니다. 문자열 상태 그대로 계산하면 의도하지 않은 결과가 나올 수 있으므로 반드시 숫자 변환이 필요합니다.

내림차순으로 정렬하기

내림차순으로 정렬하고 싶다면 비교 함수에서 뺄셈 순서만 반대로 바꿔주면 됩니다.

arr.sort((a, b) => parseFloat(b.price) - parseFloat(a.price));

원본 배열을 유지하면서 정렬하기

sort()는 원본 배열을 직접 변경(mutate)한다는 점에 주의해야 합니다. 원본을 보존해야 한다면 ES2023에서 도입된 toSorted()를 사용하거나, 스프레드 연산자로 복사본을 만든 후 정렬할 수 있습니다.

// 방법 1: toSorted() 사용 (ES2023)
const sorted1 = homes.toSorted((a, b) => parseFloat(a.price) - parseFloat(b.price));

// 방법 2: 복사본 생성 후 정렬
const sorted2 = [...homes].sort((a, b) => parseFloat(a.price) - parseFloat(b.price));