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

JavaScript로 개발을 하다 보면 객체 배열을 특정 문자열 속성 값을 기준으로 정렬해야 하는 경우가 자주 발생합니다. 예를 들어 사용자 목록을 성(last name) 순서로 가나다순 정렬하는 상황이 대표적입니다.

문제 상황

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

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

여기서 우리가 작성해야 할 함수는 이 배열을 last_name 키의 알파벳 순서에 따라 정렬하는 것입니다.

해결 방법

배열의 내장 메서드인 sort()를 활용하면 간단하게 해결할 수 있습니다. sort()는 콜백 함수를 인자로 받으며, 콜백 함수가 반환하는 값에 따라 요소들의 순서가 결정됩니다. 두 문자열의 첫 글자를 charCodeAt()으로 유니코드 코드 포인트(숫자)로 변환한 뒤 비교하면 알파벳순 정렬이 가능합니다.

예제 코드

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);

실행 결과

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

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

'Bodine' → 'Jamf' → 'Prentice' 순서로 첫 글자의 알파벳 순서대로 배열이 정렬된 것을 확인할 수 있습니다.

동작 원리 이해하기

sort() 메서드의 비교 함수는 다음 규칙에 따라 동작합니다.

• 음수 반환: a가 b보다 앞에 위치합니다.
• 양수 반환: b가 a보다 앞에 위치합니다.
• 0 반환: 순서가 변경되지 않습니다.

charCodeAt(0)은 문자열의 첫 번째 문자에 해당하는 유니코드 코드 포인트를 반환하므로, 두 값의 차이를 계산하면 위 규칙에 맞는 음수·양수·0이 자연스럽게 나옵니다.

더 안전한 방법: localeCompare() 활용

charCodeAt() 방식은 첫 글자만 비교하기 때문에 첫 글자가 같은 경우(예: 'Smith'와 'Sawyer') 올바르게 정렬되지 않을 수 있습니다. 전체 문자열을 비교하려면 localeCompare()를 사용하는 것이 좋습니다.

const sortByLastName = arr => {
    arr.sort((a, b) => a.last_name.localeCompare(b.last_name));
};

localeCompare()는 문자열 전체를 사전식으로 비교하며, 대소문자나 지역 설정(locale)까지 고려할 수 있어 실무에서 더욱 권장되는 방법입니다.

마무리

객체 배열을 문자열 속성 기준으로 정렬할 때는 sort() 메서드와 비교 함수를 조합하면 됩니다. 간단한 예제에는 charCodeAt()으로 충분하지만, 실제 서비스에서는 첫 글자가 같은 경우까지 고려할 수 있는 localeCompare() 사용을 추천합니다.