[JavaScript]배열 정렬 sort()

JavaScript에서 배열의 요소들을 정렬하기 위해 sort() 메서드를 사용합니다. sort() 메서드를 사용하면 배열의 요소를 오름차순 또는 내림차순으로 정렬할 수 있으며, 기존 배열의 요소들을 정렬합니다.

 

sort() 메서드의 특징

1. 기본적으로 오름차순으로 정렬합니다.
2. 배열 요소를 문자열로 캐스팅하고 변환된 문자열을 비교하여 순서를 결정합니다.
3. 배열의 요소가 undefined인 경우에는 문자열로 변환되지 않습니다.
4. 배열의 요소가 undefined인 경우에는 배열의 맨 끝으로 정렬이 됩니다.

var numbers = [1, 10, 2, 20, 3, 30];
numbers.sort();

console.log(numbers); // [1,10,2,20,3,30]

정렬 순서를 1, 2, 3, 10, 20, 30으로 예상을 했지만, 문자열을 비교하므로 1, 10, 2, 20, 3, 30 순서로 정렬이 됩니다.

문자열 10과 문자열 2를 비교할 때, "1" < "2" 이므로 10이 2보다 앞에 존재합니다.

 

위 문제를 해결하려면 비교 함수를 sort() 메서드에 전달해야 합니다.

array.sort(compareFunction)

---

비교 함수(compareFunction)

sort() 메서드의 비교 함수는 두 개의 인수를 전달받으며 정렬 순서를 결정하는 값을 반환합니다.

 

비교 함수의 구문

function comapre(a, b) {
// 정렬 로직
// return값은 숫자
}

 

비교 함수를 사용하여 정렬

var numbers = [1, 10, 2, 20, 3, 30];

numbers.sort(function compare(a, b) {
  if(a > b) return 1;
  if(a < b) return -1;
  return 0;
});

console.log(numbers); // [1,2,3,10,20,30]

비교 함수는 아래와 같이 간략하게 작성이 됩니다.

var numbers = [1, 10, 2, 20, 3, 30];

numbers.sort(function compare(a, b) {
  return a - b;
});

console.log(numbers); // [1,2,3,10,20,30]

 

비교 함수의 동작 방법

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

sort() 메서드는 한 번에 두 매개 변수 a와 b값을 비교 함수에 전달하여 배열의 모든 값을 비교합니다.

 

if(a > b) return 1;

return value > 0 이므로 a는 b 뒤에 옵니다.

 

if(a < b) return -1;

return value < 0 이므로 a는 b 앞에 옵니다.

 

return 0;

a와 b의 정렬을 유지합니다.

---

숫자 정렬

EX 1) 오름차순

var numbers = [1, 10, 2, 20, 3, 30];

numbers.sort(function compare(a, b) {
  return a - b;
});

console.log(numbers); // [1,2,3,10,20,30]

 

EX 2) 내림차순

a - b를 b - a로 변경합니다.

var numbers = [1, 10, 2, 20, 3, 30];

numbers.sort(function compare(a, b) {
  return b - a;
});

console.log(numbers); // [30,20,10,3,2,1]

---

문자열 정렬

EX 1) 오름차순

비교 함수 필요 없이 기본 문법을 사용하면 됩니다.

var strArray = ["BA", "BB","AA", "AB", "CB", "CA"];

strArray.sort();

console.log(strArray); // ["AA","AB","BA","BB","CA","CB"]

EX 2) 내림차순

문자열을 a - b 또는 b - a와 같이 - 연산자를 사용하여 숫자 정렬처럼 사용할 경우 정상적으로 정렬이 되지 않으므로 비교 연산자를 사용해야 합니다.

var strArray = ["BA", "BB","AA", "AB", "CB", "CA"];

strArray.sort(function compare(a, b) {
  if (a > b) return -1;
  if (a < b) return 1;
  return 0;
});

console.log(strArray); // ["CB","CA","BB","BA","AB","AA"]

비교 함수의 로직은 아래와 같이 간단하게 작성할 수 있습니다.

var strArray = ["BA", "BB","AA", "AB", "CB", "CA"];

strArray.sort(function compare(a, b) {
  return a == b ? 0 : a > b ? -1 : 1;
});

console.log(strArray); // ["CB","CA","BB","BA","AB","AA"]

 

EX 3) 대문자와 소문자를 포함

문자열에 대문자와 소문자 혼합되어 있을 경우 대문자 또는 소문자로 변환된 값을 비교해야 합니다.

var strArray = ["bA", "Bb","aa", "Ab", "cB", "ca"];

strArray.sort(function compare(a, b) {
  let x = a.toUpperCase(),
      y = b.toUpperCase();
  
  return x == y ? 0 : x > y ? -1 : 1;
});

console.log(strArray); // ["cB","ca","Bb","bA","Ab","aa"]

---

날짜 정렬

var dateArray = ['July 1, 2020', 'August 15, 2010', 'December 12, 2015'];

dateArray.sort(function compare(a, b) {
  let x = new Date(a),
      y = new Date(b);
  return x - y;
});

console.log(dateArray); // ["August 15, 2010","December 12, 2015","July 1, 2020"]

---

ASCII 문자가 아닌 문자열 정렬

ASCII가 아닌 문자(예 : é, è 등)가 포함된 경우 sort() 메서드가 정상적으로 동작하지 않습니다.

이러한 특수문자가 있을 경우 localeCompare() 메서드를 사용하여 문자열을 비교합니다.

var strArray = ["éA", "Bé","éB", "éC", "Cé", "Aé"];

strArray.sort(function compare(a, b) {
  return a.localeCompare(b);
});

console.log(strArray); // ["Aé","Bé","Cé","éA","éB","éC"]

---

객체의 속성을 기준으로 객체 정렬

var employees = [
  {name: '홍길동', salary : 30000},
  {name: '김길동', salary : 10000},
  {name: '마이콜', salary : 20000}
];

employees.sort(function compare(a, b) {
  return a.salary - b.salary;
});

console.log(employees);
/* result
[
{
  "name": "김길동",
  "salary": 10000
},
{
  "name": "마이콜",
  "salary": 20000
},
{
  "name": "홍길동",
  "salary": 30000
}]
*/

 

당연한 이야기지만, 객체에 존재하지 않은 속성을 기준으로 정렬할 경우 undefined이므로 정렬이 되지 않습니다.

var employees = [
  {name: '홍길동', salary : 30000},
  {name: '김길동', salary : 10000},
  {name: '마이콜', salary : 20000}
];

employees.sort(function compare(a, b) {
  return a.salar - b.salar;
});

console.log(employees);
/* result
[
{
  "name": "홍길동",
  "salary": 30000
},
{
  "name": "김길동",
  "salary": 10000
},
{
  "name": "마이콜",
  "salary": 20000
}]
*/