JavaScript에서 날짜 배열 정렬하기: Date 객체를 활용한 오름차순 정렬 방법

JavaScript로 개발하다 보면 날짜 데이터가 포함된 배열을 날짜 순서대로 정렬해야 하는 경우가 자주 발생합니다. 이 글에서는 Date 객체와 배열의 sort() 메서드를 활용하여 날짜 기준으로 배열을 오름차순으로 정렬하는 방법을 알아보겠습니다.

문제 상황

다음과 같이 각 요소가 [날짜, 값] 형태의 배열을 포함하는 배열이 있다고 가정해 보겠습니다.

const arr = [
    ['02/13/2015', 0.096],
    ['11/15/2013', 0.189],
    ['05/15/2014', 0.11],
    ['12/13/2013', 0.1285],
    ['01/15/2013', 0.12],
    ['01/15/2014', 0.11],
    ['02/14/2014', 0.11],
    ['03/14/2014', 0.11],
    ['01/15/2015', 0.096],
    ['07/15/2015', 0.096],
    ['04/15/2013', 0.12],
    ['04/15/2014', 0.11],
    ['05/15/2013', 0.12],
    ['06/14/2013', 0.12],
    ['06/16/2014', 0.11],
    ['07/15/2013', 0.12],
    ['07/15/2014', 0.11],
    ['03/16/2015', 0.096]
];

여기서 우리가 작성해야 할 함수는 이러한 배열을 입력받아, 각 하위 배열에 담긴 날짜를 기준으로 전체 배열을 오름차순으로 정렬하는 것입니다.

해결 방법

핵심 아이디어는 간단합니다. JavaScript의 sort() 메서드에 비교 함수(comparator)를 전달하고, 그 안에서 문자열 형태의 날짜를 Date 객체로 변환한 뒤 두 값을 빼주면 됩니다. Date 객체끼리 뺄셈을 하면 밀리초(ms) 차이가 숫자로 반환되므로, 이 값의 부호에 따라 정렬 순서가 결정됩니다.

const arr = [
    ['02/13/2015', 0.096],
    ['11/15/2013', 0.189],
    ['05/15/2014', 0.11],
    ['12/13/2013', 0.1285],
    ['01/15/2013', 0.12],
    ['01/15/2014', 0.11],
    ['02/14/2014', 0.11],
    ['03/14/2014', 0.11],
    ['01/15/2015', 0.096],
    ['07/15/2015', 0.096],
    ['04/15/2013', 0.12],
    ['04/15/2014', 0.11],
    ['05/15/2013', 0.12],
    ['06/14/2013', 0.12],
    ['06/16/2014', 0.11],
    ['07/15/2013', 0.12],
    ['07/15/2014', 0.11],
    ['03/16/2015', 0.096]
];

const sortByDate = arr => {
    const sorter = (a, b) => {
        return new Date(a[0]) - new Date(b[0]);
    };
    arr.sort(sorter);
};

sortByDate(arr);
console.log(arr);

실행 결과

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

[
    ['01/15/2013', 0.12],
    ['04/15/2013', 0.12],
    ['05/15/2013', 0.12],
    ['06/14/2013', 0.12],
    ['07/15/2013', 0.12],
    ['11/15/2013', 0.189],
    ['12/13/2013', 0.1285],
    ['01/15/2014', 0.11],
    ['02/14/2014', 0.11],
    ['03/14/2014', 0.11],
    ['04/15/2014', 0.11],
    ['05/15/2014', 0.11],
    ['06/16/2014', 0.11],
    ['07/15/2014', 0.11],
    ['01/15/2015', 0.096],
    ['02/13/2015', 0.096],
    ['03/16/2015', 0.096],
    ['07/15/2015', 0.096]
]

코드 설명 및 주의 사항

비교 함수(sorter): sort() 메서드는 비교 함수가 반환하는 값이 음수면 a를 앞으로, 양수면 b를 앞으로 배치합니다. new Date(a[0]) - new Date(b[0])는 두 날짜의 밀리초 차이를 반환하므로 자연스럽게 오름차순 정렬이 이루어집니다.
내림차순 정렬: 반대로 최신 날짜부터 정렬하고 싶다면 뺄셈 순서를 바꿔 new Date(b[0]) - new Date(a[0])로 작성하면 됩니다.
날짜 형식 주의: 'MM/DD/YYYY' 형식은 대부분의 브라우저에서 Date 생성자로 파싱되지만, 'YYYY-MM-DD'(ISO 8601) 형식을 사용하는 것이 가장 호환성이 좋습니다. 특히 Node.js나 구형 브라우저 환경에서는 날짜 문자열 파싱 방식이 다를 수 있으니 주의해야 합니다.
원본 배열 변경: sort() 메서드는 원본 배열을 직접 수정(mutate)합니다. 원본을 유지해야 한다면 [...arr].sort(sorter)처럼 복사본을 만들어 정렬하는 것이 좋습니다.

이처럼 Date 객체와 비교 함수만 활용하면 복잡한 로직 없이도 날짜 배열을 손쉽게 정렬할 수 있습니다.