javascript sort 배열 정렬방법 정리 / 오름차순, 내림차순, 문자, 숫자, 객체

sort 메서드는 배열의 요소를 정렬한다.

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

 

숫자 정렬

let num = [ 2, 3, 5, 1, 4 ]
console.log(num); // [ 2, 3, 5, 1, 4 ]

num.sort();
console.log(num); // [ 1, 2, 3, 4, 5 ]
num.sort().reverse();
console.log(num); // [ 5, 4, 3, 2, 1 ]

sort를 통해서 정렬이 가능하다. 오름차순으로 정렬을 한다.

내림차순으로 하려면 reverse를 통해서 내림차순으로 출력할 수 있다.

 

let num = [2, 3, 5, 1, 4, 10, 100, 12];
console.log(num); // [1, 10, 100, 12, 2,  3,   4,  5]

만약 배열에 1~9까지의 수가 아닌 10단위 100단위... 가 들어가게되면 오름차순에서 문제가 생긴다.

sort 메서드의 기본정렬 순서는 유니코드 코드 포인트를 따르기 때문에 배열의 요소가 number타입이라고 해도

배열의 요소를 일시적으로 문자열로 변환한 후 유니코드 코드 포인틀의 순서를 기준으로 정렬한다.

 

오름차순 정렬

이를 해결하기 위해서는 sort 메서드에 정렬 순서를 정의하는 비교 함수를 인수로 전달해야한다.

let num = [2, 3, 5, 1, 4, 10, 100, 12];
num.sort((a, b) => a - b);
console.log(num); // [1, 2, 3, 4, 5, 10, 12, 100]

- sort((a, b) => a - b) 를 통해서 정렬순서를 정의하는 비교함수를 인수로 전달하게 되면 문제없이 정렬이 된다.

- 내림차순으로 정렬을 하려면 a - b 가 아닌 b - a로 정렬한다.

- 정렬되는 방법은 a - b 를 했을 때 반환 값이 0보자 작으면 비교함수의 첫 번째 인수를 우선하여 정렬하고, 0이면 정렬하지 않는다. 0보다 크면 두 번째 인수를 우선하여 정렬한다.

 

문자 정렬

let str = ["apple", "Orange", "melon", "orange"];
str.sort();
console.log(str); // ['Orange', 'apple', 'melon', 'orange']

let ascending_order = function (a, b) {
  a = a.toUpperCase();
  b = b.toUpperCase();

  if (a > b) return 1;
  else if (a < b) return -1;
  else return 0;
};

console.log(str.sort(ascending_order)); // ['apple', 'melon', 'Orange', 'orange']

- 문자를 정렬할 때에도 인수로 전달할 수 잇는 비교함수가 필요하다.

- 대문자, 소문자별로 정렬이 된다.

- toUpperCase(), toLowerCase() 를 통해서 소문자, 대문자로 변경 후 정렬을 해주면 된다.

 

객체 정렬

let arr = [
  { id: 4, content: "JS" },
  { id: 1, content: "HTML" },
  { id: 2, content: "CSS" },
];

function compare(key) {
  return (a, b) => (a[key] > b[key] ? 1 : a[key] < b[key] ? -1 : 0);
}

arr.sort(compare("id"));
console.log(arr);
/*
[
  { id: 1, content: 'HTML' },
  { id: 2, content: 'css' },
  { id: 4, content: 'js' }
]
*/

- 객체요소를 가지고 있는 배열을 정렬할 때에도 다른 비교함수가 필요하다.

- 매개변수 key값을 통해서 정렬을 하는 함수이다.

- 프로퍼티 값이 문자일 경우에는 산술 연산으로 비교하면 NaN이 나오므로 비교 연산을 사용한다.

- 비교 함수는 양수 / 음수 / 0 을 반환하게 만들어서 산술 연산 대신 비교 연산을 사용할 수 있다.

- "id"기준으로 오름차순 정렬을 해주었다.

 

arr.sort(compare("content"));
console.log(arr);
/*
[
  { id: 2, content: 'CSS' },
  { id: 1, content: 'HTML' },
  { id: 4, content: 'JS' }
]
*/

- "content"기준으로 오름차순을 해주게 되면 문자를 비교하여 정렬되는 모습을 볼 수 있다.