JavaScript에서 키-값 쌍 객체를 값 기준으로 정렬하는 방법

JavaScript에서 객체 배열을 특정 값(속성)을 기준으로 정렬해야 하는 경우가 자주 있습니다. 이때 sort() 메서드와 비교 함수를 함께 사용하면 간단하게 해결할 수 있습니다.

정렬할 객체 예시

다음과 같이 학생 정보를 담은 객체 배열이 있다고 가정해 보겠습니다.

var details = [
    { studentId: 100, name: "John" },
    { studentId: 110, name: "Adam" },
    { studentId: 120, name: "Carol" },
    { studentId: 130, name: "Bob" },
    { studentId: 140, name: "David" }
];

sort()로 이름(name) 기준 정렬하기

위 객체 배열을 name 값을 기준으로 오름차순 정렬하려면 sort() 메서드에 비교 함수를 전달합니다. 문자열 비교에는 localeCompare()를 사용하는 것이 안전합니다.

var details = [
    { studentId: 100, name: "John" },
    { studentId: 110, name: "Adam" },
    { studentId: 120, name: "Carol" },
    { studentId: 130, name: "Bob" },
    { studentId: 140, name: "David" }
];
details = details.sort(function (obj1, obj2) {
    return obj1.name.localeCompare(obj2.name);
});
console.log(details);

실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 사용합니다. 여기서는 파일명이 demo253.js라고 가정합니다.

node demo253.js

실행 결과

콘솔에 다음과 같이 이름 알파벳 순서대로 정렬된 결과가 출력됩니다.

PS C:\Users\Amit\javascript-code> node demo253.js
[
    { studentId: 110, name: 'Adam' },
    { studentId: 130, name: 'Bob' },
    { studentId: 120, name: 'Carol' },
    { studentId: 140, name: 'David' },
    { studentId: 100, name: 'John' }
]

추가 팁

• 내림차순 정렬: 비교 결과의 부호를 반전시키면 됩니다. 즉, obj2.name.localeCompare(obj1.name)처럼 인자 순서를 바꾸거나 반환값에 -1을 곱하면 내림차순으로 정렬됩니다.
• 숫자 값 기준 정렬: studentId 같은 숫자 속성으로 정렬하려면 obj1.studentId - obj2.studentId를 반환하면 됩니다.
• 원본 배열 보존: ES2023부터는 원본 배열을 변경하지 않는 toSorted() 메서드도 사용할 수 있습니다.