JS 정렬함수(sort function)

Array.sort(정렬함수)

 

JS에서 임의의 Array를 정렬할 때 sort 메소드를 사용한다.

 

정렬함수는 정렬 순서를 결정하는 데 사용되는 함수로, 정렬함수가 없는 기본값 상태에서는 오름차순, ASCII 문자 순서대로 정렬된다.

 

배열 안의 요소를 ASCII 순서대로 정렬하다 보니, 숫자 크기 순서대로 정렬이 될 것 같지만 실제 결과는 다르다.

 

var arr = [1, 2, 10, 9, 4, 2];
var sort_default = arr.sort();

console.log(sort_default);

 

 

실제 숫자의 크기가 아닌, ASCII 값으로 정렬되어 이 부분이 문제가 될 수 있다. 즉, 직관적이지가 않다.

 

이 문제를 해결하기 위해 정렬 함수를 정의해서 사용해야 한다.

 

정렬함수에 인수를 넣고 아래의 값 중 하나를 반환해야한다.

 

• 첫 번째 인수가 두 번째 인수보다 작을 경우 음수(-) 값
• 두 인수가 같을 경우 0
• 첫 번째 인수가 두 번째 인수보다 클 경우 양수(+) 값

 

위에서 나온 배열을 작은 수부터 큰 수 까지 정렬을 하려면 아래처럼 해준다.

 

var sort_asc = arr.sort((a, b) => {
  // a 가 b 보다 작을 경우 음수가 반환되어 앞자리로 가게 됨.
  // 즉, 작은 수가 앞으로 오게 배열이 정렬된다.
  return a - b; 
});

 

 

반대로 큰 수가 앞으로 오길 원한다면

 

var sort_desc = arr.sort((a, b) => {
  return b - a;
});

 

 

a와 b의 위치만 바꿔주면 되는 것이다.

 

배열 안에 있는 아이템의 속성 중 하나의 값을 기준으로 정렬하는 것도 가능.

 

//아이템 속성 정렬
var arr = [
  { name: '철수', age: 33 },
  { name: '영희', age: 27 },
  { name: '기영', age: 12 },
];

var sort_item = arr.sort((a, b) => {
  if (a.age > b.age) {
    return 1;
  }
  if (a.age < b.age) {
    return -1;
  }
  // a must be equal to b
  return 0;
});
console.log(sort_item);

 

 

배열이 각 아이템의 나이를 기준으로 오름차순 정렬 된 것을 확인 할 수 있다.

 

정렬 함수를 어떻게 커스텀하냐에 따라 무궁무진한 정렬 결과를 얻을 수 있다.

 

여러 개의 정렬 함수를 미리 선언해놓고, 상황에 따라 맞춰서 사용하는(필터처럼) 방법도 있겠다.