JavaScript에서 배열을 연도 및 월별로 정렬하는 방법

JavaScript로 개발하다 보면 날짜 정보를 담은 객체 배열을 정렬해야 하는 경우가 자주 발생합니다. 이번 글에서는 연도(year)를 오름차순으로 정렬하고, 만약 연도가 같다면 월(month) 순서대로 정렬하는 방법을 알아보겠습니다.

문제 상황

예를 들어 다음과 같은 배열이 있다고 가정해 보겠습니다.

const arr = [{
    year: 2020,
    month: 'January'
}, {
    year: 2017,
    month: 'March'
}, {
    year: 2010,
    month: 'January'
}, {
    year: 2010,
    month: 'December'
}, {
    year: 2020,
    month: 'April'
}, {
    year: 2017,
    month: 'August'
}, {
    year: 2010,
    month: 'February'
}, {
    year: 2020,
    month: 'October'
}, {
    year: 2017,
    month: 'June'
}]

이 배열을 다음 조건에 따라 정렬해야 합니다.

기본적으로 연도(year)를 오름차순(증가 순서)으로 정렬합니다.
만약 year 속성이 같은 객체가 존재한다면, 해당 객체들은 월(month)을 기준으로 1월부터 12월까지 순서대로 정렬합니다.

정렬 코드 작성하기

핵심 아이디어는 간단합니다. 월 이름은 문자열이므로 직접 비교할 수 없기 때문에, 월 이름의 순서를 담은 참조 배열을 미리 정의한 뒤 indexOf()로 인덱스를 구해 비교하는 것입니다.

전체 코드

const arr = [{
    year: 2020,
    month: 'January'
}, {
    year: 2017,
    month: 'March'
}, {
    year: 2010,
    month: 'January'
}, {
    year: 2010,
    month: 'December'
}, {
    year: 2020,
    month: 'April'
}, {
    year: 2017,
    month: 'August'
}, {
    year: 2010,
    month: 'February'
}, {
    year: 2020,
    month: 'October'
}, {
    year: 2017,
    month: 'June'
}]
const months = ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'];
const sorter = (a, b) => {
    if(a.year !== b.year){
        return a.year - b.year;
    }else{
        return months.indexOf(a.month) - months.indexOf(b.month);
    };
};
arr.sort(sorter);
console.log(arr);

코드 동작 원리

정렬 로직은 다음과 같이 동작합니다.

연도가 서로 다른 경우: 두 객체의 year 값을 빼서 그 차이를 반환합니다. 결과값이 음수면 a가 앞에, 양수면 b가 앞에 오게 되어 자동으로 오름차순 정렬이 됩니다.
연도가 같은 경우: 미리 정의해 둔 months 배열에서 각 월 이름의 인덱스를 indexOf()로 찾아 차이를 계산합니다. 인덱스는 1월부터 순서대로 배치되어 있으므로, 같은 연도 내에서는 월 순서대로 정렬됩니다.

실행 결과

위 코드를 실행하면 콘솔에 다음과 같이 정렬된 배열이 출력됩니다.

[
    { year: 2010, month: 'January' },
    { year: 2010, month: 'February' },
    { year: 2010, month: 'December' },
    { year: 2017, month: 'March' },
    { year: 2017, month: 'June' },
    { year: 2017, month: 'August' },
    { year: 2020, month: 'January' },
    { year: 2020, month: 'April' },
    { year: 2020, month: 'October' }
]

결과를 보면 2010년 → 2017년 → 2020년 순으로 연도가 먼저 정렬되고, 같은 연도 안에서는 January → February → December처럼 월 순서대로 정렬된 것을 확인할 수 있습니다.

마무리

이처럼 Array.prototype.sort() 메서드에 커스텀 비교 함수를 전달하면 복합 조건의 정렬도 손쉽게 구현할 수 있습니다. 문자열 형태의 월 데이터를 정렬할 때는 이 예제처럼 참조 배열의 인덱스를 활용하는 방식이 가장 간단하고 직관적입니다. 실무에서는 월 데이터를 숫자(1~12)로 저장해 두면 더욱 효율적으로 처리할 수 있으니 참고하세요.