js sort 메서드 숫자 정렬 이해하기(compareFunction), 프로그래머스 정렬-레벨1-가장 큰 수

자바스크립트 프로그래머스의 정렬 1레벨 가장 큰 수 문제를 풀면서 sort 메서드를 사용하게 되었다. 

sort 메서드를 사용할 때 항상 comparefunction을 넣어서 사용했었는데 숫자 내림차순, 오름차순 정렬을 할 때 어떤 원리로 정렬이 되는 것인지 제대로 이해해보기 위해서 여기에 정리해본다. 이전에도 한번 정리했었는데 한동안 사용하지 않으니 헷갈린다.

 

특히나 가장 큰 수 정렬 문제를 할 때 처음에는 배열의 모든 요소를 조합하는 알고리즘을 사용해야 한다고 생각했었는데 정렬만을 이용해서 쉽게 구현할 수 있다는 것을 알게 되었고 그러기 위해서는 sort 메서드 내의 comparefunction을 제대로 이해하고 조작할 수 있어야 했다.

 

# sort()

array.sort([compareFunction])

 

compareFunction

- 정렬 순서를 정의하는 함수

- 이 함수가 생략되면 각 요소들은 문자열로 취급되어 유니코드 값 순서대로 정렬된다.

- 함수는 a,b의 두개의 값으로 파라미터를 입력 받는다.

- 함수의 리턴 값이 0보다 작을 경우, a가 b보다 앞에 오도록 정렬한다.

- 함수의 리턴 값이 0보다 클 경우, b가 a보다 앞에 오도록 정렬한다.

- 0이면 순서는 그대로 둔다.

- 원본 배열이 정렬되고, 리턴 값 또한 원본 배열인 array를 가리킨다.

 

그런데 신기한 건 여기서 a, b가 순서대로 잡히는 게 아니라 a가 뒤의 요소로 잡힌다.

[ 6, 10, 2 ]라는 배열로 아래와 같은 코드를 콘솔로 찍어봤는데 a자리에 10, b자리에 6이 찍힌다. a-b는 10-6=4로 찍힌다. 이게 좀 헷갈릴 수 있다.

 

 

 

자 그래서 차례대로 이해해보면,

1. 1. a=10(두번째 요소), b=6(첫번째 요소)이 되었고 둘의 차가 0보다 크니까 위에서 말했듯이 b(6)가 앞으로 정렬된다. 변경된 배열은 그대로 [ 6, 10, 2 ]가 된다.
2. a=2(세번째 요소), b=10(두번째 요소)이 된다. 둘의 차는 -8으로 0보다 작으니 위에서 말했듯이 a(2)가 앞으로 정렬된다. 따라서 변경된 배열은 [ 6, 2, 10 ] 이 된다.
3. a=2(두번째 요소), b=10(세번째 요소) ,,, sort 메서드 순서가 좀 이상해서 찾아보니 각각 모든 요소에 대해서 비교하는 방식이 아니라고 한다. 

그래서 compareFunction에 대해서만 제대로 이해하는 게 좋을 것 같다.

여기서 중요한 키포인트는 a,b를 각각 비교하는 방식을 두개의 요소를 더해 만든 새로운 두개의 요소로 비교하는 것으로 생각하는 것이다. 이렇게 비교해보면 6과 10을 a+b = "610"으로 하고 b+a="106"으로 비교하게 된다. 

b+a가 a+b보다 커서 0보다 큰 값이 나오게 되면 a가 앞에 정렬된다. 따라서 610이 더 크므로 a인 6이 앞에 정렬된다.

이대로 배열의 모든 요소를 이으면 6102가 될 것이다. 

하지만 백의자리 숫자가 2가 될 수 있다. 6210이 되기 위해서는 두번째와 세번째 요소를 가지고 a+b, b+a의 값을 비교한다. 210, 102를 비교하게 되면 210(a+b)가 크므로 a가 앞으로 정렬된다. 

배열은 [ 6, 2, 10 ]이 된다. 이후에는 두번째 요소와 세번째 요소를 비교하거나 첫번째 요소나 세번째 요소를 같은 방식으로 비교해도 [ 6, 2, 10 ]이 된다.

 

 

다음 테스트 케이스