[JavaScript] .sort(function(a, b) { return a - b; })가 작동하는 원리?

우선 이 포스팅은 내용에 대한 이해가 완전히 되지 않은 상태에서 현재까지의 이해를 정리하기 위해 작성함을 밝힌다. 관련 내용을 stackoverflow, W3Schools, MDN을 비롯해서 국내외 블로그 등 자료를 찾아봤지만 대략 무슨 말인지는 알겠는데, 여전히 명쾌하지 못하고 좀 추상적인 느낌이다.

 

sort 함수를 공부하던 중 이해가 잘 안가는 부분이 있었다. .sort(function(a, b) { return a - b; })처럼 sort의 인자(파라미터)로 함수를 받는 형태의 코드다. 이 코드는 숫자로 된 배열을 오름차순으로 정렬할 때 사용된다. 예를 들어

var myArray = [5,3,4,1,2];
myArray.sort(function (a, b) { return a - b });
console.log(myArray);
// 결과: [1, 2, 3, 4, 5]
myArray.sort(function (a, b) { return b - a });
console.log(myArray);
// 결과: [5, 4, 3, 2, 1]

이렇게 작동한다. return 값 a-b는 배열을 오름차순, b-a는 내림차순으로 정렬한다.

 

다소 직관적이지 않아 보이는 코드로 보였다. 그냥 .sort()만으로는 정렬이 안 되는 걸까? 안된다. 그 이유는 자바스크립트의 sort 함수는 기본적으로 배열을 문자열(String) 타입으로 간주하고 비교하기 때문이다. 예를 들어 [b,a,c]라는 배열에 .sort()를 적용하면 [a,b,c]로 알맞게 정렬해준다. 그런데 숫자도 마찬가지다. [90,100,110]을 sort()로 정렬하면 자바스크립트는 값을 "90" "100" "110"으로 간주하고 비교한다. 이때 "90"과 "100"을 비교 시 앞자리 9와 1을 비교, 100보다 90이 더 크다는 결론을 내린다.

 

이런 이유로 숫자를 비교하기 위해선 별도로 정의된 compare function을 이용해야하는 것이다. sort 함수는 인자로 compare function을 받는다. 즉 인자의 자리에 함수가 위치한다.

arr.sort([compareFunction])

문자열, 숫자, 참거짓과 마찬가지로 함수 역시도 인자로 받을 수 있다는 점을 먼저 알아야 한다. 여기에 function(a,b){return a-b}라는 함수는 a와 b의 값을 빼고 값이 양수가 나오면 배열에서 자리를 교체하고 음수가 나오면 교체하지 않는다. 이 로직에 대해 좀더 들어가 보면 'a와 b는 무엇인가?'라는 질문을 하게 된다. [5,3,4,1,2]이 있다면, a와 b는 양옆에 붙어 있는 숫자인가? 5,3 / 3,4 / 4,1 / 1,2 ... 순으로 짝지어 비교하는 건가? 이 질문에 대한 답은 '그럴 수도 있고 아닐 수도 있다'다.

 

이게 무슨 말이냐면 자바스크립트 엔진에 설계된 알고리즘이 계산 절차를 결정한다는 것이다. 가령 어떤 엔진은 5와 3을 비교했다가 갑자기 3과 2를 비교한다던가, 또 다른 엔진은 3과 4를 먼저 비교했다가 1과 2를 비교한다던가 하는 식이다. 물론 이 예시는 나의 뇌피셜이고 핵심은 구체적인 로직은 엔진마다 다를 수 있다는 거다. 과정은 다를 수 있지만 [1,2,3,4,5]로 정렬해준다는 결론은 같다.

 

공부한 걸 정리하면

• 자바스크립트 sort 함수는 인자로 값을 비교하는 함수(compare function)를 받는다. 이 개념이 Callback과 연관되는 것 같은데, 명확하지가 않다. 이 부분은 추후 알게되면 업데이트해야겠다
• compare function이 어떤 알고리즘으로 작동하는가를 이해하는 것은 현재로서는 불필요해 보인다

결론: Shut up and calculate