Sort메서드란?

배열은 기본적으로 순서가 있는 자료형이므로 정렬이 가능하다.
Sort메서드 배열의 요소들을 정렬할 때 사용하는 함수이다.
Sort는 정렬된 새로운 배열을 생성해주는 것이아니라, 기존의 배열을 정렬해주는 것임을 유념해야한다.

Sort의 원리에 대해서 자세히 알아보자

Sort메서드의 원리

가장 기본적인 사용방법

const numbers = [1,5,3,4,7,9];
numbers.sort();
console.log(numbers);

숫자 타입 정렬시 유의할 점

const numbers = [1,5,3,4,7,9,11,33,44,32];

numbers.sort();

console.log(numbers);

숫자가 두자릿수가 넘어가면 의도하지 않은 현상이 생긴다. 이는 sort가 숫자의 앞자리 수만 보고 정렬을 하기 때문에 생기는 현상이다.

sort메서드의 기본 정렬 순서는 유니코드 코드 포인트의 순서를 따른다. 따라서 배열의 요소가 숫자 타입이라 할지라도 배열의 요소를 일시적으로 문자열로 변환한 후 유니코드 코드 포인트의 순서를 기준으로 정렬한다.

그래서 숫자를 sort할때는 sort의 괄호안에 정렬 순서를 정의하는 비교함 수를 인수로 전달해야한다.

내부 동작 원리 분석

const numbers = [1,5,3,4,7,9,11,33,44,32];

numbers.sort((a,b)=>{
    console.log(a,b)
}); 

console.log(numbers);

이처럼 두 개를 한 쌍으로 우측으로 한 칸씩이동이면서, 비교해주고 있다는 것을 알 수 있고, 의외로 a에 들어오는 값이 첫번째 요소가 아닌 두번째 요소인 것을 볼 수 있다.

여기에 리턴값을 넣어보겠다.

const numbers = [1,5,3,4,7,9,11,33,44,32];

numbers.sort((a,b)=>{
    console.log(a,b)
  return 1
}); 

console.log(numbers);

return이 1일때 결과가 오름차순으로 출력됨을 알 수 있다.

const numbers = [1,5,3,4,7,9,11,33,44,32];

numbers.sort((a,b)=>{
    console.log(a,b)
  return -1
}); 

console.log(numbers);

return이 -1일때 결과가 내림차순으로 출력됨을 알 수 있다.

비교 함수는 양수나 음수 또는 0을 반환해야 한다. 비교 함수의 반환값이 0보다 작으면 비교 함수의 첫 번쨰 인수를 우선 정렬하고, 0이면 정렬하지 않으며, 0보다 크면 두번쨰 인수를 우선하여 정렬한다.

즉 sort의 가장 큰 핵심은 return값의 양수냐 음수냐에 따라 정렬이 달라진다는 것이다.

현재의 숫자와 비교할 다음 인덱스의 숫자의 차(-)가 양수인지 음수인지를 확인해서 순서를 바꿔주는 기능이라고 보면 된다.

내 생각에 a,b의 위치가 바뀌어 있다는 점이 많은 사람들에게 혼란을 주는 것 같다.

여기서부터 헷갈릴 수 있다. 정신바짝 차리고 따라오자.

const numbers = [1,5,3,4,7,9,11,33,44,32];

numbers.sort((a,b)=>{
    return a-b;
  // = return 5-1
}); 

console.log(numbers);

★★★★★
return 5-1 는 양수다!
양수이므로 b를 앞으로, a를 뒤로 보낸다.
그런데 b가 뭐다? b가 1이다!
고로 오름차순인 1,5로 정렬이 되는 것이다!!!!
이 과정을 한칸씩 옆으로가면서 반복하는 것이다.
★★★★★

const numbers = [1,5,3,4,7,9,11,33,44,32];

numbers.sort((a,b)=>{
    return b-a;
}); 

console.log(numbers);

참고) 오브젝트의 정렬

const animals = [
  {name: "monkey", size:"m",wieght:7},
  {name: "cat", size:"s",wieght:5},
  {name: "lion", size:"b",wieght:30},
  {name: "mouse", size:"s",wieght:3},
  {name: "코끼리", size:"b",wieght:1000},
  {name: "dog", size:"m",wieght:7},
]

animals.sort((a,b)=>{ 
             return a.name > b.name ? 1:-1;
             })

console.log(animals);

참고문헌 : 데브리, 자바스크립트 딥다이브