JavaScript에서 날짜와 중요도, 두 가지 기준으로 배열 정렬하는 방법

실무에서는 하나의 배열을 여러 기준으로 동시에 정렬해야 하는 경우가 자주 발생합니다. 이번 글에서는 JavaScript의 sort() 메서드를 활용해 날짜(date)와 중요도(isImportant)라는 두 가지 기준을 적용하여 객체 배열을 정렬하는 방법을 알아보겠습니다.

정렬 조건은 다음과 같습니다.

• isImportant가 true인 객체는 false인 어떤 객체보다도 항상 앞쪽에 위치합니다.
• 각 그룹 내부에서는 date 속성 값을 기준으로 정렬합니다.

정렬할 배열 준비하기

먼저 아래와 같이 객체들을 담고 있는 배열이 있다고 가정해 보겠습니다.

const array = [
  {
    id: 545,
    date: 591020824000,
    isImportant: false,
  },
  {
    id: 322,
    date: 591080224000,
    isImportant: false,
  },
  {
    id: 543,
    date: 591080424000,
    isImportant: true,
  },
  {
    id: 423,
    date: 591080225525,
    isImportant: false,
  },
  {
    id: 135,
    date: 591020225525,
    isImportant: true,
  },
];

sort() 메서드로 정렬 로직 구현하기

위 배열에 원하는 결과를 얻으려면 sort() 메서드에 비교 콜백 함수를 전달하면 됩니다.

array.sort((a, b) => {
  if (a.isImportant && !b.isImportant) {
    return -1;
  } else if (!a.isImportant && b.isImportant) {
    return 1;
  } else {
    return b.date - a.date;
  }
});

콜백 함수의 반환값 이해하기

sort()의 콜백 함수는 일반적으로 a와 b라는 두 개의 인자를 받습니다. 이들은 sort()가 호출된 배열의 요소 두 개이며, 콜백 함수는 배열 내 요소들의 가능한 모든 쌍에 대해 실행됩니다. 반환값에 따라 정렬 순서가 결정됩니다.

• -1 (음수) 반환: 첫 번째 요소(a)가 두 번째 요소(b)보다 앞에 위치합니다.
• 1 (양수) 반환: 두 번째 요소(b)가 첫 번째 요소(a)보다 앞에 위치합니다.
• 0 반환: 두 요소의 순서가 변경되지 않습니다.

위 코드는 먼저 a 또는 b 중 어느 한쪽의 isImportant가 false인지 확인합니다. 만약 그렇다면 해당 요소를 더 뒤로 밀어냅니다. 두 요소의 중요도가 같다면, date 속성 값을 비교하여 최신 날짜(더 큰 값)가 앞에 오도록 정렬합니다.

전체 예제 코드

지금까지의 내용을 하나로 합친 완전한 예제는 다음과 같습니다.

const array = [
  {
    id: 545,
    date: 591020824000,
    isImportant: false,
  },
  {
    id: 322,
    date: 591080224000,
    isImportant: false,
  },
  {
    id: 543,
    date: 591080424000,
    isImportant: true,
  },
  {
    id: 423,
    date: 591080225525,
    isImportant: false,
  },
  {
    id: 135,
    date: 591020225525,
    isImportant: true,
  },
];

array.sort((a, b) => {
  if (a.isImportant && !b.isImportant) {
    return -1;
  } else if (!a.isImportant && b.isImportant) {
    return 1;
  } else {
    return b.date - a.date;
  }
});

console.log(array);

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

[
  { id: 543, date: 591080424000, isImportant: true },
  { id: 135, date: 591020225525, isImportant: true },
  { id: 423, date: 591080225525, isImportant: false },
  { id: 322, date: 591080224000, isImportant: false },
  { id: 545, date: 591020824000, isImportant: false }
]

결과를 보면 isImportant가 true인 객체(id 543, 135)가 상단에 먼저 배치되었고, 각 그룹 내에서는 date 값이 큰 순서대로, 즉 최신 날짜순으로 정렬된 것을 확인할 수 있습니다. 이처럼 비교 콜백 함수 안에서 우선순위 조건을 차례대로 검사하면, 두 개 이상의 기준으로도 손쉽게 배열을 정렬할 수 있습니다.