Sort() 알아보기

이묘·2022년 8월 2일
0

JavaScript 정리

목록 보기
1/2
post-thumbnail

위 이미지에는 우아한형제들에서 제공한 배달의민족 도현체가 적용되어 있습니다.

서론

프로그래머스에서 코테를하다가 sort함수를 응용하는 부분이 있는데 문제를 풀다가 원리를 조금 자세히 살펴보고 가면 좋을 것 같아서 공부한 내용을 복습겸 다시 정리해보려고한다.



Sort()?

sort([compareFuntion])

sort()는 배열의 요소를 정렬할 때 쓰는 함수이다.
위에서 쓴 []는 배열이라는 의미가 아니라 상황에 따라 생략 가능하다는 의미를 담고있다고 한다.

공식문서의 번역을 보면

compareFuntion은 정렬 순서를 정의하는 함수이다.
compareFuntion을 생략하면 각 요소의 문자열 변환에 따라 각 문자의 유니코드 포인트값에 따라 정렬된다.

뭔가 어렵게 적혀있는 듯 싶지만 쉽게 말하면 arr.sort()라고 사용하면 arr이라는 배열의 각 요소들을 문자열로 알아서 변환해서 유니코드값에 따라 정렬하겠다는 뜻이다.

예를들어,
arr = [1, 3, 2, 10]이라면

arr.sort()
// 결과: [1, 10, 2, 3]

저건 무슨 정렬인가 싶겠지만 이게 맞다. 현재 sort()안에 compareFuntion부분은 공란이다. 그래서 문자열로 알아서 변환하여 유니코드값으로 변환을 했는데, 10의 유니코드값이 아니라 문자열로 각각 '1','0'과 '2'의 유니코드값을 비교했으니 당연히 1이 작게 나올 수 밖에 없다.

문자열로치면 'A' 'AJ' 'B' 를 나열한 것과 비슷한 원리겠다.



compareFuntion

하지만 우리가 원하는건 저런 문자열로서의 배열이 아니라 숫자의 배열이다.

어떻게 해야할까? compareFuntion에 함수를 적어주면 된다.

compareFuntion을 선언할 경우 sort()는 함수에게 배열의 2개의 요소(보통 a,b라고 많이들 선언한다.)를 2개씩 반복해서 보낸 뒤,
compareFuntion이 반환하는 값을 기준으로 정렬한다. 이 반환값에 따라 sort()함수가 해석해서 정렬한다.

그냥 문자 그대로 그렇다고 알아들으면 된다.

반환값에 따른 sort()의 해석은 아래와 같다.

a-b의
return값 < 0 (=> a가 b보다 앞에 있어야한다.)
return값 = 0 (=> a와 b의 순서를 바꾸지 않는다.)
return값 > 0 (=> b가 a보다 앞에 있어야한다.)



오름차순 정렬

그러면 숫자를 오름차순 정렬을 하려면 어떻게 해야할까?

arr.sort(funtion compare(a, b) {
  return a - b;
})

// 익명함수 사용
arr.sort((a, b) => {
  return a - b;
})

// 더 짧게는 이렇게도 쓴다.
arr.sort((a,b) => a-b );

편한걸로 골라서 쓰면된다.
sort함수는 따로 정의해놓을 필요가 거의 없어서 나는 익명함수를 즐겨쓴다.



내림차순 정렬

그러면 숫자를 내림차순 정렬은 어떻게 할까?

리턴값의 a와 b를 반대로 쓰면 된다.

arr.sort(funtion compare(a, b) {
  return b - a;
})

// 익명함수 사용
arr.sort((a, b) => {
  return b - a;
})

// 더 짧게는 이렇게도 쓴다.
arr.sort((a,b) => b-a );


sort()의 compareFuntion

사실 코테를 풀거나 필요해서 찾아보지 않는 이상 아무도 관심없을 것이다. 나도 그랬으니까..ㅎ

일단 코드부터 보고 설명해보자.

let arr = [1, 2, 10]

// 1번
arr.sort();

// 2번
arr.sort((a,b) => {return (a>b)-(a<b)});

결론부터 말하자면 1번과 2번은 같은 알고리즘으로 동작한다.
boolean값을 어떻게 뺄 수 있느냐 의문갖는 사람도 있겠지만 자바스크립트에선 가능하다.

일단 true=1, false=0 이라는 것을 알고 시작해보자.


이 아래는 조금 긴 설명이 될테니 그냥 아 그렇구나 하고 넘어갈 사람은 넘겨도 된다. 그리고 이 정리내용은 그냥 내가 이해하기 편하게 정리한 내용이니 틀린 내용이 포함될 수 있다.

sort는 배열에서 2개씩 반복해서 뽑고 compareFuntion에서의 리턴값을 기준으로 정렬한다고 위에서 정리했었다. 그러면 sort가 1,2를 뽑았다고 가정하고 이를 각각 a,b에 넣었다고 가정하자.

그러면 compareFuntion에서는
(a,b) => {return (a>b)-(a<b)
이 식에 대해서 리턴값을 내릴 것이다.

(a>b) 이 식은 false이므로 0이고, (a<b)은 true이므로 1이다.
따라서 리턴값은 0-1 즉, -1이되고 리턴값이 음수이므로 a(1)가 b(2)보다 앞쪽에 위치해야하므로 1, 2순서로 나열이 된다.

같은 맥락으로 2(b라고 가정)와 10(a라고 가정)을 비교할 때에도 이런식으로 식을 써주면 a>b는 true(1), a<b는 false(0)이므로 리턴값은 1.
양수이므로 b(2)가 a(10)보다 앞에 있어야한다. 따라서 [1, 2, 10]으로 정렬이 되는 것이다.





결론 및 정리

  • sort()
    배열의 요소를 문자열로 변환해서 유니코드값으로 정렬한다.
    arr.sort((a,b) => {return (a>b)-(a<b)})와 같다.

  • 오름차순 정렬
    arr.sort((a,b) => a-b );

  • 내림차순 정렬
    arr.sort((a,b) => b-a );





예제같은 것들은 밑에 공식사이트에서 찾아보고 알아서 돌려보길 바란다..
공홈이 최고임..!


출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

profile
본질을 공부해야 응용도 하지 않을까

0개의 댓글