👉🏻 JS : sort( ) 함수 이해하기 - 정렬

코딩테스트 문제를 풀다가 숫자를 오름차순으로 정렬해야 하는 부분에서 sort()를 사용했더니 숫자가 제대로 정렬되지 않고 아스키 문자 기준으로 정렬되었다.
구글링을 해본 결과 sort() 함수 안에 다른 익명의 함수를 써서 값을 리턴하는데… 솔직히 원리를 이해하지 못하고 그냥 암기한 후 적용하기만 했다.
하지만 계속해서 숫자를 정렬해야 하는 상황들이 생기면서 대체 왜 sort() 안에 또 다른 함수를 사용해서 정렬을 해야 하는지 그 원리가 궁금했다.

📍 sort() 기본 구조

: 먼저 sort()는 배열의 요소를 정렬할 때 사용하는 함수다.
공식 문서에 따르면 기본 구문은 아래와 같았다.

arr.sort([compareFunction]) → 단순히 sort() 구조인 줄 알았지만 특이한 매개변수가 존재했다.

• [compareFunction] 는 매개변수가 필수가 아닌, 상황에 따라 생략도 가능하다는 의미!
  ⭐️ 즉, 매개변수를 필수적으로 사용해야 하는 것은 아니지만 상황에 따라서 매개변수가 필요하다는 것이다.

📍 sort()기본 정렬

하지만 중요한 것은 이 매개변수를 생략하게 된다면 배열의 요소들은 아스키 문자 기준의 오름차순으로 정렬이 된다.

arr.sort() → 다음과 같이 아주 일반적인 구조로 사용하게 되면 해당 배열은 문자 기준 오름차순으로 정렬이 된다는 것!

매개변수를 생략하고 숫자가 담긴 배열을 정렬하게 되면 숫자의 크기대로 정렬이 되지 않아서 원하는 결과값을 얻지 못하게 된 것!
⇒ 즉, 숫자 기준으로 정렬을 하기 위해서는 매개변수를 사용해야 한다.

📍 숫자 타입 기준으로 정렬

→ 숫자 타입을 기준으로 정렬하기 위해서는 compareFunction 선언을 해야 한다.

[ 활용 방법 ]

let array = [2, 23, 4, 67, 120]
function compare(a, b){
	return a - b
}
array.sort(compare)

배열의 요소들을 하나씩 비교할 수 있도록 하는 함수 compare을 선언한 후에 sort 함수의 매개변수로 넣어준다.
즉, sort 함수를 compare 기준으로 정렬한다는 의미로 이해하면 될 것 같다!

👀 원리 이해하기
문제는, compare 함수의 원리가 무엇인지 궁금했다는 것…!
compare 함수는 a와 b를 매개변수로 받고 a, b 매개변수에 array의 요소들을 하나씩 대입해 비교한다.
만약 a가 2, b가 23라면 a-b는 2-23로 결과값이 -21 음수가 된다.
이때 연산의 결과가 음수라면 2와 23의 위치를 그대로 둔다.
후에 또다시 다른 요소들도 다시 비교를 시작한다.
다음으로는 a가 23, b가 4라면 23 - 4로 결과값이 19 양수가 된다.
이때 연산의 결과가 양수라면 23과 4의 위치를 바꿔버린다.
23 → 4 에서 4 → 23 오름차순으로 순서를 바꿔버리는 것이다.

• 내림차순으로 정렬을 하기 위해서는 a - b가 아닌 b - a를 반환하면 된다.

위의 원리로 알 수 있는 것은, 익명의 함수 compare은 배열의 원소들을 하나씩 비교해서 위치를 변경하는 역할을 한다는 것이다.

완벽한 이해는 아닐 수 있지만 그래도 어느 정도 원리를 알고 나니 더 다양하게 sort 함수를 활용할 수 있을 것 같다!

✅ ES6부터 도입된 화살표 함수 표현법

array.sort((a, b) => a - b); // 오름차순

참고 : https://noirstar.tistory.com/359
https://brunch.co.kr/@swimjiy/12