Javascript의 sort에 대해 알아보자.
2023. 8. 30. 10:58ㆍVanilla JS
코딩테스트 준비를 하면서 sort() 메서드를 반복적으로 사용하다보니 궁금증이 생겨서 적어두려고 한다.
1. Sort() 란?
- Array.prototype.sort()
sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드포인트를 따릅니다.
- MDN
- 주로 배열을 정렬하고자 할 때 많이 사용하는 메서드이다. python에서는 배열뒤에 sort() 메서드를 사용하면 오름차순으로 정렬되지만 javascript에서 sort() 메서드를 이용하게 되면 사용자의 생각처럼 오름차순 정렬이 되지 않는다.
// Python Code - 예시 1
list_num = [33, 2, 81, -77, 44, 1, 10, 99, 5, 0, -2]
list_num.sort();
print(list_num) // [-77, -2, 0, 1, 2, 5, 10, 33, 44, 81, 99]
// Javascript code - 예시 1
const list_num = [33, 2, 81, -77, 44, 1, 10, 99, 5, 0, -2];
list_num.sort();
console.log(list_num); // [-2, -77, 0, 1, 10, 2, 33, 44, 5, 81, 99]
- 위의 예제 코드를 보면 "배열을 오름차순 정렬해야겠다" 라는 생각으로 javascript에서 sort() 메서드를 이용하게 되면 발생하게 되는 문제이다. MDN에서 설명했듯이 Javascript에서의 sort() 메서드는 문자열의 유니코드 코드 포인트를 따른다고 명시되어있다.
2. Sort 메서드의 사용법
- 그렇다면 생각대로 오름차순을 정렬하기 위해선 어떻게 해야할까?
// Javascript code - 예시 2
const list_num = [33, 2, 81, -77, 44, 1, 10, 99, 5, 0, -2];
list_num.sort((a,b) => a-b);
console.log(list_num); // [-77, -2, 0, 1, 2, 5, 10, 33, 44, 81, 99]
- sort() 메서드 안에 a,b 라는 매개변수를 이용하여 정렬을 진행해야만 한다. a와 b는 어떤 수가 담기길래 정렬이 되는걸까?
// Javascript code - 예시 3
const list_num = [33, 2, 81, -77, 44, 1, 10, 99, 5, 0, -2];
list_num.sort((a,b) => {
console.log(`a : ${a} / b : ${b}`);
});
/*
a : 2 / b : 33
a : 81 / b : 2
a : -77 / b : 81
a : 44 / b : -77
a : 1 / b : 44
a : 10 / b : 1
a : 99 / b : 10
a : 5 / b : 99
a : 0 / b : 5
a : -2 / b : 0
*/
console.log(list_num); // [33, 2, 81, -77, 44, 1, 10, 99, 5, 0, -2]
- a와 b에 대해 콘솔을 출력하게 되면 위의 주석이 출력된다. a와 b에 대해 비교하는 과정이 반복되며 정렬이 된다는 사실을 알게 되었다. 다만 a-b 대신 console.log() 로 변경하니 list_num이 변경되지 않았다. return 값이 없기 때문이다. 다른 코딩테스트를 연습하다보면 가끔씩 return 1; return -1; 과 같은 return 값이 있는 경우를 보았다.
- sort() 메서드 내부에서 반환 값으로 1과 -1을 사용하는 것은 정렬 순서를 결정하는 방법 중 하나라고 한다.
- 비교 함수가 0보다 작은 값을 반환하면 첫번째 인자(a)를 두번째 인자(b) 보다 낮은 인덱스로 정렬한다.
- 비교 함수가 0보다 큰 값을 반환하면 첫번째 인자(a)를 두번째 인자(b)보다 높은 인덱스로 정렬한다.
- 비교 함수가 0을 반환하면 첫번째 인자(a)와 두번째 인자(b)의 순서를 변경하지 않는다.
- 위의 조건을 통하여 console.log() 부분을 변경해보면
// Javascript code - 예시 4
const list_num = [33, 2, 81, -77, 44, 1, 10, 99, 5, 0, -2];
list_num.sort((a,b) => {
if(a < b) return -1;
else if(a > b) return 1;
return 0;
});
console.log(list_num); // [-77, -2, 0, 1, 2, 5, 10, 33, 44, 81, 99]
- 예시 2번의 console과 동일하게 출력되는 것을 볼 수 있었다!
3. 정리
- 코딩테스트 문제를 풀다가 sort() 메서드만 작성해서 틀린 것 때문에 의문이 들어서 작성했다. 간혹 배열 안에 배열을 정렬하기 위해서 많이 헤맸던 기억이 있는데 이번에 글을 쓰면서 조금 정리가 된 것 같다. 가끔씩 Javascript의 메서드들에 대해 궁금증이 생기면 기록해두도록 해야겠다.
'Vanilla JS' 카테고리의 다른 글
parseInt()와 '+' 연산자의 차이 (0) | 2023.07.18 |
---|---|
[Vanilla JS] - 4. 배열의 특정 값 삭제하기. (0) | 2022.01.14 |
[Vanilla JS] - 3. parentNode vs parentElement (0) | 2022.01.13 |
[Vanilla JS] - 2. 원하는 문자 앞뒤로 채워넣기 - padStart() , padEnd() (0) | 2022.01.12 |
[Vanilla JS / Nomadcoders] - 1. localStorage 사용하기 (0) | 2022.01.11 |