arr.sort()는 언더바 과제하면서 알게된 메소드인데, 리턴값에 따라 정렬이 어떻게 되는지 헷갈려서 애를 먹었다. 그래서 sort() 메소드 공부하며 정리해보려 한다.

Array.prototype.sort()

sort() 메소드는 배열의 요소를 정렬해서 그 배열을 반환한다.
원본 배열을 정렬해서 반환하는 것이 포인트!

sort(compareFunction)

파라미터로 함수를 갖는다.
compareFunction에는 정렬 순서를 정의할 함수가 들어간다.
생략하게 되면 기본적으로 오름차순으로 정렬되며, 유니 코드 값에 따라 자동 정렬된다.

let arr = ["apple", "pear", "watermelon", "banana"];

arr.sort();
// ["apple", "banana", "pear", "watermelon"]

요소가 number 타입이면?

let numArr = [4, 2, 6, 8, 1, 19, 30];

numArr.sort();
//[1, 19, 2, 30, 4, 6, 8]

오름차순으로 정렬될 줄 알았는데 반환값을 보면 이상하게 정렬된 것을 볼 수 있다.
숫자 정렬에서는 2가 19보다 앞에 와야하지만 숫자도 문자열로 변환되어 유니 코드 값으로 정렬되기 때문이다.

이때, 파라미터로 compareFunction을 써서 정렬할 수 있다.

compareFunction을 쓰면 배열 요소는 함수의 return 값에 따라 정렬된다.

• return 값이 양수일 때
  b를 a보다 앞에 정렬한다.
• return 값이 음수일 때
  a를 b보다 앞에 정렬한다.
• return 값이 0일 때
  a, b 위치를 변경하지 않는다.

오름차순

• 첫 번째 인수가 두 번째 인수보다 작을 때 > return -1
• 두 인수가 같을 때 > return 0
• 첫 번째 인수가 두 번째 인수보다 클 때 > return 1

let numArr = [4, 2, 6, 8, 1, 19, 30];

numArr.sort(function(a,b) {
  if(a<b) return -1;	//a를 b보다 앞에 정렬 
  if(a>b) return 1;	//b를 a보다 앞에 정렬 
  if(a===b) return 0;	//변경하지 않음
});
//[1, 2, 4, 6, 8, 19, 30]

위 코드를 개발자 콘솔에 debugger로 돌려보면 인자 a에는 arr[1], 인자 b에는 arr[0]가 들어가 둘을 비교한다. 즉, 인자 a에 다음 요소가 들어가고, b에 현재 요소가 들어간다.

내림차순

내림차순은 return 값이 앞서 본 오름차순과 반대이다.

let numArr = [4, 2, 6, 8, 1, 19, 30];

numArr.sort(function(a,b) {
  if(a<b) return 1;	//b를 a보다 앞에 정렬 
  if(a>b) return -1;	//a를 b보다 앞에 정렬 
  if(a===b) return 0;	//변경하지 않음
});
//[30, 19, 8, 6, 4, 2, 1]

숫자 정렬 더 간결하게 만들기

정렬 함수의 return값은 어떤 숫자든 반환 할 수 있다. 양수를 반환하는 경우 첫 번째 인수가 두 번째 인수보다 '크다’를 나타내고, 음수를 반환하는 경우 첫 번째 인수가 두 번째 인수보다 '작다’를 나타내기만 하면 되기 때문에 숫자 비교시 더 간결하게 return 값을 넣어줄 수 있다.
(Infinity 및 NaN이 포함되어 있지 않은 경우에)

let numArr = [3, 6, 12, 40, 2, 25, 37];

오름차순
numArr.sort(function(a,b) {
    return a-b;
});
//[1, 2, 4, 6, 8, 19, 30]

내림차순
numArr.sort(function(a,b) {
    return b-a;
});
//[30, 19, 8, 6, 4, 2, 1]