날짜 순으로 정렬

프로젝트를 진행하다 보면 데이터를 시간 순으로 정렬 할 때가 있다.

일반적으로 날짜, 시간에 따라 내림차 순 오름차 순으로 데이터를 정렬한다.

 

테스트 데이터

const data = [
  {
    user: 1,
    createDate: '2024-03-10'
  },
   {
    user: 2,
    createDate: '2024-02-11'
  },
  {
    user: 3,
    createDate: '2024-02-15
  },
   {
    user: 4,
    createDate: '2024-03-09
  },
   {
    user: 5,
    createDate: '2024-03-20
  },
]

 

오름차 순

과거에서 최신 날짜 순으로

new Date()를 사용하여 문자열로 입력된 날짜를 날짜 형태로 변환한 후 sort 함수를 이용하여 정렬 반환하는 방식이다.

 

기본 문법

arr.sort((a: number, b: number): number => {
    return a - b;
});

 

sort 비교 함수 a - b를 반환하는 이유

• 만약 a가 b보다 작다면 (a - b가 음수), a를 b보다 앞으로 이동 시킨다.
• 만약 a가 b와 같다면 (a - b가 0), 순서를 변경하지 않는다.
• 만약 a가 b보다 크다면 (a - b가 양수), b를 a보다 앞으로 이동 시킨다.

예시

const sortDate =data.sort((a, b) => {
  return new Date(a.createDate) - new Date(b.createDate);
});

console.log(sortDate)

/*
[{
  "user": 2,
  "createDate": "2024-02-11"
},
{
  "user": 3,
  "createDate": "2024-02-15"
},
{
  "user": 4,
  "createDate": "2024-03-09"
},
{
  "user": 1,
  "createDate": "2024-03-10"
},
{
  "user": 5,
  "createDate": "2024-03-20"
}]
*/

 

내림차 순

최신 날에서 과거 순으로

방법

• 오름차 순으로 정렬한 데이터를 reverse() 메서드를 활용해 배열의 순서를 반전 해 최신 날에서 과거 순으로 정렬한다.
• b - a 로 오름차 순 식과 반대로 ‘-’ sort 하면 된다.

기본 문법

arr.sort((a: number, b: number): number => {
    return b - a;
});

 

예시

const sortDate =data.sort((a, b) => {
  return new Date(a.createDate) - new Date(b.createDate);
});

// or
const sortDate =data.sort((a, b) => {
  return new Date(b.createDate) - new Date(a.createDate);
});

console.log(sortDate.reverse())

/*
[{
  "user": 5,
  "createDate": "2024-03-20"
},
{
  "user": 1,
  "createDate": "2024-03-10"
}, 
{
  "user": 4,
  "createDate": "2024-03-09"
},
{
  "user": 3,
  "createDate": "2024-02-15"
},
{
  "user": 2,
  "createDate": "2024-02-11"
}]
*/

 

 

참고

Array.prototype.sort() - JavaScript | MDN