JavaScript에서 가격 기준으로 객체 배열 정렬하는 방법

문제 상황

다음과 같이 주택 정보와 가격(price) 데이터를 담고 있는 객체 배열이 있다고 가정해 보겠습니다.

const arr = [
    {
        "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 값이 숫자가 아니라 문자열로 저장되어 있다는 것입니다. 문자열 그대로 비교하면 의도하지 않은 결과가 나올 수 있으므로, 정렬 전에 반드시 숫자로 변환해야 합니다.

해결 방법

배열의 sort() 메서드에 비교 함수(comparator)를 전달하면 간단히 해결할 수 있습니다. 비교 함수 안에서 단항 더하기(+) 연산자를 사용해 문자열을 숫자로 변환한 뒤 차감하면 오름차순 정렬이 완성됩니다.

const arr = [
    {
        "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 eitherSort = (arr = []) => {
    const sorter = (a, b) => {
        return +a.price - +b.price;
    };
    arr.sort(sorter);
};
eitherSort(arr);
console.log(arr);

코드 동작 원리

• +a.price: 단항 더하기(+) 연산자는 피연산자를 숫자로 변환합니다. 예를 들어 +"162500"은 숫자 162500이 됩니다.
• 반환값의 부호: 비교 함수의 결과가 음수면 a가 앞에, 양수면 b가 앞에 배치되어 자동으로 오름차순 정렬됩니다.
• 내림차순 정렬: 정렬 순서를 반대로 바꾸고 싶다면 b.price - a.price처럼 뺄셈 순서를 뒤집거나, 비교 결과에 -1을 곱하면 됩니다.
• 원본 배열 변경 주의: sort()는 원본 배열을 직접 수정합니다. 원본을 유지해야 한다면 [...arr].sort(sorter)처럼 복사본을 만들어 정렬하는 것이 좋습니다.

실행 결과

위 코드를 실행하면 콘솔에 다음과 같이 가격이 낮은 순서대로 정렬된 배열이 출력됩니다.

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