[JavaScript] sort 함수를 이용한 데이터 정렬

자바스크립트에서 배열을 정렬할 때는 보통 sort() 메서드를 활용한다. 

sort는 원본 배열을 직접 변경하며 정렬된 원본 배열을 반환한다. 

 

Array.prototype.sort(compareFn?: (a: T, b: T) => number): this

즉, 배열.sort([비교함수])의 형태로 사용한다. 
비교함수는 보통 요소를 비교해 1, 0, -1을 반환하는 함수이다.
양수를 반환하는 경우 두 요소의 순서를 변경하고, 음수나 0을 반환하면 순서를 유지한다. 
두 가지 이상의 기준으로 sort할 때 동일한 값으로 판단되는 0은 유용하다. 0인 경우 다른 값을 기준으로 다시 비교할 수 있기 때문이다. 

MDN에 나와 있는 sort의 compareFn 정렬 기준에서 확인할 수 있다. 

 

따라서, 오름차순의 경우 a>b일 때(더 큰 값이 앞에 있는 경우) 순서를 변경하도록 하고, 내림차순의 경우 a<b일 때(더 작은 값이 앞에 있을 때) 순서를 변경하도록 양수를 반환하면 된다. 

 

/**
 * 객체 정렬 비교 함수(key순으로 오름차순 정렬)
 * true(1)을 반환하는 조건의 경우 자리를 바꾸고, -1이나 0이면 그대로 유지
 *  */

// 더 큰 값이 앞에 있는 경우 자리 바꾸기 -> 오름차순
function asc(key) {
  return function (a, b) {
    return a[key] > b[key] ? 1 : a[key] < b[key] ? -1 : 0;
  };
}

// 더 작은 값이 앞에 있는 경우 자리 바꾸기 -> 내림차순
function desc(key) {
  return function (a, b) {
    return a[key] < b[key] ? 1 : a[key] > b[key] ? -1 : 0;
  };
}

 

실제 데이터 형태를 정렬해보자.

const data = [
  { id: 4, content: "JavaScript", startedAt: "2021-01-02", isUsed: true },
  { id: 1, content: "HTML", startedAt: "2022-01-02", isUsed: false },
  { id: 2, content: "CSS", startedAt: "1980-01-02", isUsed: false },
  { id: 5, content: "TypeScript", startedAt: "2021-05-02", isUsed: true },
];

// id(숫자) 기준
data.sort(asc("id")); // 오름차순
data.sort(desc("id")); // 내림차순

// content 기준
data.sort(asc("content"));
data.sort(desc("content"));

// date 기준 정렬
data.sort(asc("startedAt"));
data.sort(desc("startedAt"));

숫자와 날짜의 경우는 - 연산이 가능하지만 문자열은 불가능하므로 객체의 값을 기준으로 비교해 1, -1, 0을 비교하는 함수를 이용한다. 

 

📍REF

https://poiemaweb.com/js-array-higher-order-function

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort