[자바스크립트] javascript sort() 메소드 사용방법

1. sort() 메소드란?

Array.prototype.sort()

sort()는 배열에서 사용하는 메소드이다.
배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다.
일반적인 다른 언어의 sort()함수와는 다르게 자바스크립트는 원소들을 문자열로 만든 뒤 유니코드 값을 기준으로 정렬하기 때문에 sort()함수만 사용한다면 우리가 원하는 정렬이 나오지 않는다.

 

2. sort() 구문

arr.sort([compareFunction])

sort()의 구문은 다음과 같다. compareFunction을 생략하게 되면 각 요소를 문자열로 변환해 비교한다.
따라서 compareFunction을 생략하면 정렬은 다음과 같이 이루어진다.

let arr = [1, 6, 4, 3, 100];
console.log(arr.sort());
//[1, 100, 3, 4, 6]

따라서 이를 우리가 원하는 오름차순, 내림차순으로 정렬하려면 다음과 같이 작성해야한다.

 

3. sort() 오름차순

//sort() 오름차순 구문
let arr = [1, 2, 3, 4, 100]
arr.sort((a, b) => a - b);
//[1, 2, 3, 4, 100]

이 때, 변수를 a, b로 선언한 탓에 a에 1이 들어가고 b에 2가 들어갈 줄 알았는데 아니었다.
헷갈리기 때문에 다음과 같이 이해하면 좋다.

arr.sort((next, prev) => next - prev); //next=2, prev=1 일 때, 1

원리는 맨 밑에서

 

4. sort() 내림차순

//sort() 내림차순 구문
let arr = [1, 2, 3, 4, 100]
arr.sort((next, prev) => prev - next); //next=2, prev=1 일 때, -1
//[100, 4, 3, 2, 1]

 

5. compareFunction, 비교함수의 원리
다음 세가지 상황으로 나누어 볼 수 있다.

1) comepareFucntion(next, prev) < 0  |  비교함수가 0보다 작은 경우 : 자리를 변경한다.
2) comepareFucntion(next, prev) == 0  |  비교함수가 0과 같은 경우   : 자리를 변경하지 않는다.
3) comepareFucntion(next, prev) > 0  |  비교함수가 0보다 큰 경우     : 자리를 변경하지 않는다.

예시

let numbers = [4, 2, 5, 1, 3]
numbers.sort((next, prev)=> next - prev)

이는 아래와 같은 코드이고 확인을 위해 콘솔을 찍어봤다.

첫 번째로 next = 2 prev = 4 가 들어가고 next - prev = -2로 0보다 작다. 따라서 자리를 변경한다. [2, 4, 5, 1, 3]
두 번째로 next = 5 prev = 2 가 들어가고 next - prev = 3으로 0보다 크다.
                  따라서 자리를 변경하지 않는다.
세 번째로 next = 5 prev = 4 가 들어가고 next - prev = 1로 0보다 크다. 따라서 자리를 변경하지 않는다. 
  ...생략...

이런식으로 compare함수가 0보다 큰지 작은지 0과 같은지를 확인하여 자리를 바꿔준다.

compare 함수가 0보다 작으면 자리를 바꿔주기 때문에
오름차순은 (next - prev)이고 내림차순은 (prev - next)이다.
오름차순은 prev가 더 작아야 하므로 next - prev가 0보다 작으면 앞 수가 더 크다는 걸 판별해 자리를 바꿔줄 수 있고, 내림차순은 next가 더 작아야 하므로 prev - next가 0보다 작으면 next가 더 크다는 걸 판별해서 자리를 바꿔줄 수 있다.

 

참고

https://velog.io/@jakeseo_me/Javascript-Sort%ED%95%A8%EC%88%98%EC%97%90-%EB%8C%80%ED%95%9C-%EC%9E%A1%EC%A7%80%EC%8B%9D

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