JavaScript를 다루다 보면 날짜 문자열을 포함한 객체 배열을 날짜 순서대로 정렬해야 하는 경우가 자주 발생합니다. 이번 글에서는 date 속성을 기준으로 배열을 정렬하는 방법을 알아보겠습니다.
문제 상황
예를 들어, 다음과 같이 날짜 정보를 담고 있는 객체 배열이 있다고 가정해 보겠습니다.
const arr = [{id: 1, date: 'Mar 12 2012 10:00:00 AM'}, {id: 2, date: 'Mar 8 2012 08:00:00 AM'}];여기서 우리가 작성해야 할 함수는 이 배열을 받아 각 객체의 date 속성 값을 기준으로 배열을 정렬하는 것입니다. 정렬 순서는 최신 날짜가 먼저 오거나, 가장 오래된 날짜가 먼저 오도록 지정할 수 있습니다.
해결 접근 방식
핵심 아이디어는 간단합니다. 날짜 문자열은 그대로 비교하기 어렵기 때문에, 먼저 각 문자열을 JavaScript의 Date 객체로 변환한 뒤, getTime() 메서드로 밀리초 단위의 타임스탬프를 얻어 서로 비교하면 됩니다.
new Date(문자열)→ 날짜 문자열을 Date 객체로 변환getTime()→ 1970년 1월 1일부터 경과한 밀리초 반환- 두 타임스탬프의 차이를 반환하면 오름차순(오래된 날짜 우선) 정렬됨
구현 예제
실제 코드로 살펴보겠습니다.
const arr = [{id: 1, date: 'Mar 12 2012 10:00:00 AM'}, {id: 2, date: 'Mar 8 2012 08:00:00 AM'}];
const sortByDate = arr => {
const sorter = (a, b) => {
return new Date(a.date).getTime() - new Date(b.date).getTime();
}
arr.sort(sorter);
};
sortByDate(arr);
console.log(arr);코드 설명
sorter 함수는 두 객체 a와 b의 날짜를 각각 Date 객체로 변환한 후 타임스탬프 차이를 계산합니다. 결과값이 음수면 a가 앞에, 양수면 b가 앞에 위치하게 되어 배열 전체가 날짜 오름차순으로 정렬됩니다.
만약 최신 날짜를 먼저 표시하고 싶다면 뺄셈 순서만 반대로 바꾸면 됩니다.
// 내림차순(최신 날짜 우선) 정렬 return new Date(b.date).getTime() - new Date(a.date).getTime();
실행 결과
위 코드를 실행하면 콘솔에 다음과 같이 출력됩니다.
[
{ id: 2, date: 'Mar 8 2012 08:00:00 AM' },
{ id: 1, date: 'Mar 12 2012 10:00:00 AM' }
]결과를 보면 원래 배열에서 id 1이 먼저였지만, 날짜가 더 이른 id 2가 앞으로 온 것을 확인할 수 있습니다. 이처럼 Date 객체와 타임스탬프 비교만 활용하면 복잡한 날짜 형식의 데이터도 손쉽게 정렬할 수 있습니다.