Javascript의 sort() 내장함수에 관하여

개요

상품의 가격의 오름차순으로 정렬하고 싶은 경우 sort()를 써본 코드인데 sort의 compareFunction에 대해서 너무 명확하게 이해가 되지 않아서 생각정리를 위해 쓰는 글

if (filters.sort === "asc") {
  products.sort((a, b) => a.price - b.price);
}

 

sort() ?

sort는 Array의 요소들을 정렬하기 위해 쓰이는 함수이다.

 

sort()의 매개변수

sort의 매개변수로서 compareFunction()이 optional하게 들어가 있다.(써도되고 안써도되고)

공식문서의 compareFunction에 대한 설명으로는

• compareFunction(a, b)이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬합니다. 즉, a가 먼저옵니다.
• compareFunction(a, b)이 0을 반환하면 a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬합니다. 참고 : ECMAscript 표준은 이러한 동작을 보장하지 않으므로 모든 브라우저(예 : Mozilla 버전은 적어도 2003 년 이후 버전 임)가 이를 존중하지는 않습니다.
• compareFunction(a, b)이 0보다 큰 경우, b를 a보다 낮은 인덱스로 소트합니다.
• compareFunction(a, b)은 요소 a와 b의 특정 쌍이 두 개의 인수로 주어질 때 항상 동일한 값을 반환해야합니다. 일치하지 않는 결과가 반환되면 정렬 순서는 정의되지 않습니다.

즉, compareFunction(a,b)의 return 값이 0보다 낮거나 같은 경우에는 자리를 안바꾸고 0보다 크면 바꾼다는 말이다.

 

그럼 우리가 하고 싶은 정렬이 어떤 숫자의 오름차순일때 어떻게 생각해야 할까?

오름차순으로 하고 싶을때는 숫자가 낮은게 먼저 와야 함으로 앞에 있는값이 더 작으면 그대로,  더 크면 바꾸면된다.

즉, a(앞에 있는 값) - b(뒤에 있는 값) 로 return을 하게 되면 앞에있는값이 더 작을때는 -가 return되기때문에 그대로이고 +일때는 앞에있는값이 뒤로 가게 되는것이다.

 

근데 여기서 나는 a가 앞에 있는 값 b가 뒤에 있는 값이라고 정의는 했지만, 그럼 a와b는 배열에서 붙어있는 숫자인데, 어떤 순서로 (a,b) 셋트가 들어 가는지는 아직 불명확하다. 예를 들면 [10, 5, 6, 1] 이라는 배열이 있는데 그럼 compareFunction에 들어가는 매개변수로써 (10,5) (5, 6), (6,1) 이런 순서로 들어갈까?

그건 아닐수도 있다고 들었다. javascript가 실행되는 환경에 있는 javascript 엔진에 따라 코드가 최적화되는 방법도 다르고

sort에 대한 알고리즘도 버블정렬을 쓰는건지 퀵정렬을 쓰는건지 다를 수도 있다고 들었다.

 

결론

어찌됐든 지금의 나로써 중요한건 compareFunction(a,b)의 return 값이 0보다 클때 a,b의 자리를 바꾼다는 것!

 

v8엔진(javscript 엔진) 참고글(최적화되는 과정이 아주 잘 나와있음)

https://evan-moon.github.io/2019/06/28/v8-analysis/

V8 엔진은 어떻게 내 코드를 실행하는 걸까?