[JavaScript] sort() 메소드를 이용한 배열 정렬

dudmy.net/javascript/2015/11/16/javascript-sort/

자바스크립트 정렬 함수, sort() - Dudmy's Devprint

자바스크립트에서 sort()메소드를 사용해 배열을 정렬할 수 있다.

array.sort([compareFunction]);

conpareFunction은 생략 가능하며 생략하면 기본적으로 유니코드를 기준으로 정렬한다.

 

문자열 요소의 배열을 정렬하는 경우 )

const stringArray = ["banana", "apple", "가방", "나비", "pineapple"];

stringArray.sort();

console.log(stringArray); // ["apple", "banana", "pineapple", "가방", "나비"]

영어는 A, B, C,,,순서대로 정렬이 되고 한글은 ㄱ, ㄴ, ㄷ,,,순서대로 정렬이 되고 있다.

 

영어와 한글 중에는 영어가 앞에 온다.

 

숫자 배열을 정렬하는 경우 )

const numberArray = [3, 59, 6, 20, 7];

numberArray.sort();

console.log(numberArray); // [20, 3, 59, 6, 7]

 

숫자를 정렬하는 경우에 20보다 작은 3이 앞에 오는 것이 아니라 앞자리 숫자가 더 작은 20이 앞에 정렬된 것을 볼 수 있다.

 

이것은 숫자의 크기를 비교한 것이 아니라 숫자를 문자로 인식하여 유니코드를 기준으로 정렬했기 때문이다.

 

 

문자열과 숫자 요소의 배열을 정렬하는 경우 )

const NumberAndString = [13, "happy", 7, "ice", "마카롱"];

NumberAndString.sort();

console.log(NumberAndString); // [13, 7, "happy", "ice", "마카롱"];

숫자 -> 영어 -> 한글 순으로 정렬된다.

 

숫자 요소의 배열을 정렬하는 경우 알맞은 compareFunction을 정의해줌으로써 우리가 원하는 정렬된 배열을 얻을 수 있다.

 

compareFunction은 다음과 같은 로직으로 작성해야 한다.

 

즉, a가 b보다 앞에 와야하면 -1(음수)을 반환,

 

a가 b보다 뒤에 와야하면 1(양수)을 반환,

 

위치의 변동이 없으면 0을 반환해야 한다.

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

 

- 숫자 오름차순 정렬

 

숫자를 오름차순으로 배열하고싶다면 더 작은 값이 앞에 와야 한다.

 

따라서 a가 b보다 작으면 앞에 와야하니까 -1(음수)를 반환하게 하고

 

a가 b보다 크면 뒤에 와야 하니까 1(양수)를 반환하도록 하는 함수를 작성해주면 된다.

 

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

꼭 -1이 와야 하는 것이 아니라 그 값이 음수가 되면 되는 것이기 때문에 두 값의 차를 이용해 더 간단하게 작성할 수 있다.

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

a가 b보다 크면 양수, a가 b보다 작으면 음수, a와 b가 같으면 0이 반환된다.

 

위 코드는 화살표 함수를 이용해 좀 더 간단하게 작성할 수 있다.

array.sort((a, b) => a - b);

- 숫자 내림차순 정렬

 

숫자를 내림차순으로 정렬하고싶다면 a와 b의 차이값을 반대로 반환되게 하면 된다.

array.sort((a, b) => b - a);