JavaScript에서 객체 배열을 문자열 속성 값 기준으로 정렬하는 방법

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

const arr = [
    { first_name: 'Lazslo', last_name: 'Jamf' },
    { first_name: 'Pig', last_name: 'Bodine' },
    { first_name: 'Pirate', last_name: 'Prentice' }
];

이 배열을 last_name 속성(키)의 알파벳 순서에 따라 정렬하는 JavaScript 함수를 작성해야 합니다.

그럼 이 함수의 코드를 작성해 보겠습니다.

예제

코드는 다음과 같습니다.

const arr = [
    { first_name: 'Lazslo', last_name: 'Jamf' },
    { first_name: 'Pig', last_name: 'Bodine' },
    { first_name: 'Pirate', last_name: 'Prentice' }
];
const sortByLastName = arr => {
    arr.sort((a, b) => {
        return a.last_name.charCodeAt(0) - b.last_name.charCodeAt(0);
    });
};
sortByLastName(arr);
console.log(arr);

charCodeAt(0)은 문자열의 첫 번째 문자에 해당하는 유니코드 코드 값을 반환합니다. sort() 메서드의 콜백 함수에서 두 요소의 첫 글자 코드 값을 서로 빼면, 결과가 음수일 때는 a가 앞에, 양수일 때는 b가 앞에 오도록 배열이 자동으로 정렬됩니다.

출력

콘솔에 출력되는 결과는 다음과 같습니다.

[
    { first_name: 'Pig', last_name: 'Bodine' },
    { first_name: 'Lazslo', last_name: 'Jamf' },
    { first_name: 'Pirate', last_name: 'Prentice' }
]

참고: localeCompare()로 더 안전하게 정렬하기

위 방식은 첫 글자만 비교하기 때문에 첫 글자가 같은 경우(예: 'Jamf'와 'Jackson')에는 올바른 사전순 정렬을 보장하지 못합니다. 문자열 전체를 비교하려면 localeCompare()를 사용하는 것이 좋습니다.

arr.sort((a, b) => a.last_name.localeCompare(b.last_name));

localeCompare()는 두 문자열 전체를 사전순으로 비교하며, 필요에 따라 대소문자 구분이나 지역 설정(locale)까지 고려할 수 있어 훨씬 견고한 정렬 결과를 얻을 수 있습니다.