JavaScript에서 객체 배열을 age 속성 기준 오름차순으로 정렬하는 방법

문제 소개

JavaScript로 개발을 하다 보면 객체(object)로 이루어진 배열을 특정 속성값을 기준으로 정렬해야 하는 경우가 자주 발생합니다. 이번 글에서는 각 객체의 age 속성을 기준으로 배열을 오름차순(작은 값부터 큰 값 순서)으로 정렬하는 방법을 알아보겠습니다.

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

const people = [
    {"id":1, "name":"Andrew", "age":30, "gender":"m", "category":"G"},
    {"id":2, "name":"Brandon", "age":25, "gender":"m", "category":"G"},
    {"id":3, "name":"Christine", "age":20, "gender":"m", "category":"G"},
    {"id":4, "name":"Elena", "age":29, "gender":"W", "category":"M"}
];

우리가 작성해야 할 함수는 위와 같은 배열을 입력받아, 각 객체의 age 속성 값을 기준으로 배열 자체를 제자리(in-place)에서 오름차순으로 정렬하는 함수입니다.

따라서 최종 출력 결과는 다음과 같은 형태가 되어야 합니다.

const output = [
    {"id":3, "name":"Christine", "age":20, "gender":"m", "category":"G"},
    {"id":2, "name":"Brandon", "age":25, "gender":"m", "category":"G"},
    {"id":4, "name":"Elena", "age":29, "gender":"W", "category":"M"},
    {"id":1, "name":"Andrew", "age":30, "gender":"m", "category":"G"}
];

핵심 원리: sort() 메서드와 비교 함수

JavaScript의 배열에는 기본적으로 sort() 메서드가 내장되어 있습니다. 이 메서드는 선택적으로 비교 함수(comparator)를 인자로 받으며, 비교 함수가 음수를 반환하면 첫 번째 요소가 앞으로, 양수를 반환하면 두 번째 요소가 앞으로 정렬됩니다.

따라서 두 객체의 age 값의 차이(a.age - b.age)를 반환하면, 나이가 적은 객체가 앞쪽에 위치하는 오름차순 정렬이 자연스럽게 완성됩니다.

예제 코드

다음은 전체 구현 코드입니다.

const people = [
    {"id":1, "name":"Andrew", "age":30, "gender":"m", "category":"G"},
    {"id":2, "name":"Brandon", "age":25, "gender":"m", "category":"G"},
    {"id":3, "name":"Christine", "age":20, "gender":"m", "category":"G"},
    {"id":4, "name":"Elena", "age":29, "gender":"W", "category":"M"}
];

// 나이를 기준으로 두 객체를 비교하는 함수
const sorter = (a, b) => {
    return a.age - b.age;
};

// 배열을 age 오름차순으로 정렬하는 함수
const sortByAge = arr => {
    arr.sort(sorter);
};

sortByAge(people);
console.log(people);

실행 결과

위 코드를 실행하면 콘솔에 다음과 같이 나이 오름차순으로 정렬된 배열이 출력됩니다.

[
    { id: 3, name: 'Christine', age: 20, gender: 'm', category: 'G' },
    { id: 2, name: 'Brandon', age: 25, gender: 'm', category: 'G' },
    { id: 4, name: 'Elena', age: 29, gender: 'W', category: 'M' },
    { id: 1, name: 'Andrew', age: 30, gender: 'm', category: 'G' }
]

정리 및 추가 팁

객체 배열을 특정 숫자 속성 기준으로 정렬할 때는 sort() 메서드에 (a, b) => a.age - b.age 형태의 비교 함수를 전달하는 것이 핵심입니다. 참고로 몇 가지 유용한 포인트를 정리하면 다음과 같습니다.

내림차순 정렬: 비교 함수에서 반환값의 부호를 반대로 바꾸면 됩니다. 즉, b.age - a.age를 반환하면 나이 내림차순으로 정렬됩니다.

원본 배열 보존: sort()는 원본 배열을 직접 변경합니다. 원본을 유지하고 싶다면 ES2023부터 지원되는 toSorted() 메서드를 사용하거나, 정렬 전에 스프레드 문법([...arr].sort(...))으로 복사본을 만들어 정렬하면 됩니다.

문자열 속성 정렬: 이름처럼 문자열 속성을 기준으로 정렬할 경우에는 a.name.localeCompare(b.name)을 사용하는 것이 한글 등 다양한 언어 환경에서 안전합니다.