커스텀 정렬하기

01/14

 

 

JavaScript 에서 기본 Array.prototype.sort() 를 사용하게 되면, 기본적으로 문자열의 유니코드 순서를 따르게 된다.
예를 들면, [1, 2, 10] 인 경우 sort 후 [1, 10, 2] 가 되는 식.

이런 기본 sort 말고, 원하는 방법으로 커스텀 하여 정렬하는 방법을 정리해보자.

 

arr.sort([compareFunction]);

compareFunction 은 optional 로, 생략하면 앞에서도 소개했지만 배열 각 요소의 문자열 변환에 따라 각 문자의 유니코드 코드 포인트 값에 따라 정렬된다.
반환은 원 배열이 정렬되어 반환되는 것에 주의. 복사해서 반환하도록 하고 싶다면 .sort 대신 .toSorted() 이쪽을 사용하면 된다.

이제 실제로 커스텀 정렬을 하려면, 이 compareFunction 을 어떻게 정의하냐에 따라 달라진다.
인수를 넣고 그 결과가 셋 중 하나로 나오도록 구성하면 되는데,

function compare(a, b) {
  if (a < b) {
    return -1;
  }
  if (a > b) {
    return 1;
  }
  // a == b
  return 0;
}

• a < b 인 경우 음수(-) 값
• a == b 경우 0
• a > b 인 경우 양수(+) 값

따라서, a, b 값을 어떻게, 무엇으로 구성하냐에 따라 각각의 기준으로 정렬을 할 수 있게 되는 것이다!

 

예시를 몇 개 들어보자면,

var numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => {
  return a - b;
});

// [1, 2, 3, 4, 5]

수인 경우 단순히 a - b 와 같은 연산만으로 간단하게 비교할 수 있다. function 을 정의하지 않아도 일회용이라면 람다식을 통해 간단히 사용할 수 있는 것도 편리한 부분.
내림차순으로 정렬하고 싶다면, 간단하게 a - b 를 b - a 로 바꿔주고 역방향 정렬도 가능하다.

 

var items = [
  { name: "Edward", value: 21 },
  { name: "Sharpe", value: 37 },
  { name: "And", value: 45 },
  { name: "The", value: -12 },
  { name: "Magnetic", value: 13 },
  { name: "Zeros", value: 37 },
];

// value 기준으로 정렬
items.sort(function (a, b) {
  if (a.value > b.value) {
    return 1;
  }
  if (a.value < b.value) {
    return -1;
  }
  // a must be equal to b
  return 0;
});

// name 기준으로 정렬
items.sort(function (a, b) {
  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // 이름이 같을 경우
  return 0;
});

객체의 속성 중 하나를 가져와, 속성값을 기준으로도 정렬할 수 있다. 해당 속성간의 compareFunction 을 기준으로 한 비교로, 전체 객체가 array 내에서 재정렬된다.

 

const Color = {
  RED: 0,
  GREEN: 1,
  BLUE: 2
}

const customColors = [Color.RED, Color.BLUE, Color.GREEN];

// ============================================

const items = [
  { id: 'A', name: '하늘색', color: Color.BLUE },
  { id: 'B', name: '초록색', color: Color.GREEN },
  { id: 'C', name: '빨간색', color: Color.RED },
  { id: 'D', name: '짙은 파랑', color: Color.BLUE }
];

items.sort((a, b) => {
  const indexA = customColors.indexOf(a.color);
  const indexB = customColors.indexOf(b.color);
  
  // 인덱스를 비교하여 순서를 반환.
  return indexA - indexB;
});

/*
출력 결과:
[
  { id: 'C', name: '빨간색', color: 0 }, // RED (customColors[0])
  { id: 'A', name: '하늘색', color: 2 }, // BLUE (customColors[1])
  { id: 'D', name: '짙은 파랑', color: 2 }, // BLUE (customColors[1])
  { id: 'B', name: '초록색', color: 1 }  // GREEN (customColors[2])
]
*/

내가 실제로 사용했던 방법은, enum형 구분과 실제 데이터의 정렬 순서를 커스텀 정렬로 함께 사용해 기준을 잡아 compareFunction 을 만들었다. 실제 들어오는 데이터는 이제 각 enum 의 순서 외에, 내가 원하는 순서대로 정렬하는 것이 가능해졌다..!