[JavaScript] 배열 정렬하기

JS에서 배열을 오름차순 정렬을 하기 위해서는 sort() 함수를 쓰면 된다. 그러나 아래와 같은 문제가 발생한다.

const arr=[1, 10, 3, 2];
arr.sort();
console.log(arr); // [ 1, 10, 2, 3 ]

우리가 원하는 결과는 [1, 2, 3, 10] 인데 이상한 결과가 출력된다. 이 문제를 해결하기 위해서는 sort() 안에 compareFunction을 사용해야한다. compareFunction은 정렬 순서를 정의하는 함수이다. 이를 사용하지 않게 되면, 배열 내의 원소들이 문자열로 취급되기 때문에 유니코드 값 순서대로 정렬된다. 따라서 위와 같은 결과가 발생한 것이다.

compareFunction은 2개의 배열 원소를 파라미터로 입력 받는다. 예를 들어, a, b 2개의 원소를 파라미터로 입력받는다고 하면 아래와 같은 결과를 도출한다.

 

이 함수가 반환하는 값이

• 0보다 작으면, a가 b보다 먼저 오도록 정렬한다.
• 0보다 크면, b가 a보다 먼저 오도록 정렬한다.
• 0을 반환하면, a와 b의 순서를 변경하지 않는다.

오름차순으로 정렬을 하기 위해서는 작은 값이 큰 값보다 먼저 와야 한다. 만약 a < b라고 했을 때, a가 먼저 와야 하므로 이 때의 반환값은 0보다 작아야 한다. 반대로 a > b라고 했을 때, b가 먼저 와야 하므로 반환값은 0보다 커야 한다. 따라서 오름차순 정렬을 할 때 compareFunction은 아래와 같이 쓴다.

const arr=[1,10,3,2];

// 오름차순
arr.sort(function(a,b){
    return a-b;
});

console.log(arr); // [ 1, 2, 3, 10 ]

 

반대로 내림차순으로 정렬을 하기 위해서는 return b-a; 로 쓰면 된다.

 

이번에는 문자열을 정렬해보자. 오름차순으로 정렬하기 위해서는 compareFunction을 사용하지 않아도 된다. 사용하지 않게 되면 배열 내의 원소들이 문자열로 취급된다고 위에서 말한 것이 그 이유이다. 반대로 내림차순으로 정렬하기 위해서는 compareFunction을 사용해야 한다. 내림차순은 큰 값이 앞에 와야 하므로 아래와 같이 작성한다.

const arr=['a','c','bc','ac','ab'];

// 내림차순
arr.sort(function(a,b){
    if(a < b) return 1;
    if(a > b) return -1;
    if(a === b) return 0;
});

console.log(arr); // [ 'c', 'bc', 'ac', 'ab', 'a' ]

 

그러나 대문자가 포함되어 있다면 얘기가 다르다. 유니코드 상에서 대문자가 소문자보다 앞서기 때문에 아래와 같은 결과가 발생한다.

const arr = ['banana', 'b', 'Boy'];

arr.sort();
console.log(arr); // ['Boy','b','banana']

따라서 이를 대소문자 구분 없이 정렬하기 위해서는 compareFunction 내의 파라미터를 모두 대문자로 변환하거나 모두 소문자로 변환한 후에 비교를 해야 한다.

const arr = ['banana', 'b', 'Boy'];

// 내림차순
arr.sort(function(a, b) {
  const upperCaseA = a.toUpperCase();
  const upperCaseB = b.toUpperCase();
  
  if(upperCaseA < upperCaseB) return 1;
  if(upperCaseA > upperCaseB) return -1;
  if(upperCaseA === upperCaseB) return 0;
});

console.log(arr); // ['Boy', 'banana', 'b']

오름차순의 경우에도 대문자 및 소문자 변환이 필요하므로 sort() 만 사용하지 않고 아래와 같이 사용해야 한다.

const arr = ['banana', 'b', 'Boy'];

// 오름차순
arr.sort(function(a, b) {
  const upperCaseA = a.toUpperCase();
  const upperCaseB = b.toUpperCase();
  
  if(upperCaseA > upperCaseB) return 1;
  if(upperCaseA < upperCaseB) return -1;
  if(upperCaseA === upperCaseB) return 0;
});

console.log(arr); // ['b', 'banana', 'Boy']

 

추가로, localeCompare를 통해서도 문자열을 정렬할 수 있다. 예를 들어 아래와 같은 조건이 주어진다면 이를 사용할 수 있다.

문자열 배열이 주어지고, 길이가 짧은 순으로 정렬하되,
길이가 동일하다면 사전 오름차순으로 정렬해라



let arr = ["but", "i", "wont", "hesitate", "no", "more", "it", "cannot", "wait", "im", "yours"];

arr.sort(function (a, b) {
    if (a.length === b.length) return a.localeCompare(b);
    return a.length - b.length;
  });
  
  console.log(arr);
  // ['i', 'im', 'it', 'no', 'but', 'more', 'wait', 'wont', 'yours', 'cannot', 'hesitate']