ദ്ദി ˘ ͜ʖ ˘) JavaScript I 배열 요소를 정렬하고 싶을 때 .sort()

 

 

👇

MDN

모던자바스크립트 deepDive

 

sort 메서드는 정~말 많이 사용하는 메서드다.

정~말 많이 사용하는 것 치고는 간단한 오름차순, 내림차순 정도의 정렬만 이해 없이 암기한 상태.

이해가 있어야 응용도 할 수 있는 법!

이해를 위해 정리하고 넘어가고자 한다.

 

 

 

---

 

Array.prototype.sort

arr.sort([compareFunction])

compareFunction 은 정렬 순서를 정하는 함수를 의미한다.

만약에 함수 부분이 비어 있으면(사용유무 선택가능) 각 요소를 문자열로 변환한다.

그다음 변환된 문자열의 유니코드 코드 포인트의 순서를 따라 정렬한다. 

 

sort는 기본적으로 배열의 요소를 정렬하는 메서드이다.

주의할 점은 원본 배열을 직접 변경하며 변경(정렬)한 배열을 반환한다는 것이다. (복사본을 만드는 게 아니다!)

기본적으로 오름차 순으로 정렬된다.

 

문자열로만 이루어진 배열은 ㄱㄴㄷ순, abc순으로 문제없이 정렬된다.

하지만 숫자로만 이루어진 배열은 주의가 필요하다.

위에서 말했던 것처럼 모든 요소를 문자열로 변환하는데, 변환되어 버린 문자열(요소)의 유니코드 코드 포인트의 순서를 따른다.

ex ) [10, 2]라는 배열에 sort 메서드를 사용하면 [2, 10]으로 변환된 배열을 기대하지만 실상은 그렇지 못하다.
문자열로 변환된 "10"과 "2"의 유니코드 코드 포인트에 따라 정렬하면 [10, 2]로 정렬되기 때문이다. 

 

그렇다면 숫자를 오름차순 혹은 내림차순으로 정렬하기 위해서는 어떻게 해야 할까?

바로 제일 먼저 말했던 compareFunction 즉, 정렬 순서를 정하는 비교 함수를 정의해주어야 한다.

 

비교 함수는 양수 or 음수 or 0을 반환한다. 

반환값이 양수일 경우, 두 번째 인수를 우선하여 정렬한다. 

반환값이 음수일 경우, 첫 번째 인수를 우선하여 정렬한다. 

반환값이 0일 경우, 정렬하지 않는다 (변함없다)

 

[10, 20, 4, 5].sort((a,b) => a-b);
// 10 - 20 = 음수 >>> 첫 번째 인수 우선 10, 20 순서
// 10 - 4 = 양수 >>> 두 번째 인수 우선, 4, 10 순서 ... 이렇게 양/음/0 판별 반복

 

 

 

---

 

ok~ 기본은 이해했다. 어떤 느낌으로 움직이는 건지!

나머지 응용은 계속 문제를 풀고 고민해보는 수밖에 없는 거겠지... 아자~! 

 

🧐💭

1. 딥다이브에서 sort 메서드의 정렬 알고리즘이 quicksort 알고리즘에서 -> timsort알고리즘으로 바뀌었다는 정보를 입수.

quick sort? tim sort? 도대체 이게 다 뭔데... 그러던 와중 감사한 포스트를 찾았다. 🧑‍💻 Tim sort란? 

2. 객체. sort()를 할 때에는 비교하는 함수, 어떤 것을 기준으로 정렬할 것인지를 정하는 게 중요하다!