자바스크립트에서 숫자 배열을 정렬할 때 sort 와 reverse 메서드를 사용할 수 있지만, 정확하게 정렬되지 않는 문제가 생긴다. 그렇기에 sort 와 reverse 메서드에 비교 함수를 추가하여 보다 정확하게 숫자 배열을 정렬할 수 있다. sort 와 reverse 메서드는 어렵지 않지만 비교함수에 대해서 동작 원리를 살펴 볼 필요가 있다.
자바스크립트 숫자 배열 비교 함수 정렬
Sorting Javascript Number Array Compare Function
sort 메서드와 reverse 메서드로 자바스크립트 배열을 정렬할 수 있다.
문자열과 숫자 모두 정렬이 가능하지만, 숫자의 경우 맹점을 하나 발견할 수 있다.
10, 100, 20 의 경우 정렬이 제대로 되지 않는다.
이를 바로 정렬하기 위해 사용하는 것이 비교함수인 Compare Function 을 사용하는 방법이다.
비교 함수 Compare Function
비교 함수의 용도는 간단하다.
두 수를 입력하여 뺄셈을 한다.
뺄셈 후 나오는 결과값이 - 라면 오름차순이다.
뺄셈 후 나오는 결과값이 + 라면 내림차순이다.
사용법은 다음과 같다.
// 오름차순
Array.sort(function(a, b) { return a - b });
Array.reverse(function(a, b) { return a - b });
// 내림차순
Array.reverse(function(a, b) { return b - a });
Array.sort(function(a, b) { return b - a });예제를 만들기 전에 위의 비교 함수가 배열과 어떻게 작동하는지 살펴보자.
let vNumberComp = [10, 20, 30, 40]
vNumberComp.sort(
function(a, b) {
console.log("a, b = ", a, b)
return a - b
});
vNumberComp.reverse(
function(a, b) {
console.log("a, b = ", a, b)
return a - b
});위의 sort 와 reverse 메서드에 비교 함수를 넣고 로그를 출력하도록 하였다.
배열의 값은 4개인데 어떻게 저런 것이 가능한지 가시적으로 살펴보도록 한다.
첫번째는 sort 메서드와 비교함수를 사용한 것이고, 두번째는 reverse 메서드와 비교함수를 사용한 것이다.
sort 와 reverse 메서드가 내부적으로 반복되는 것을 알 수 있다.
반복하면서 두 수를 인자값으로 받고 뺄셈연산을 하고 있다.
위에서도 언급했지만 두 수를 뺄셈하여 - 가 나오면 오름차순, + 가 나오면 내림차순이다.
숫자형 배열 정렬하기
이제 본격적으로 자바스크립트 배열에 있는 숫자들을 정렬해 보자.
정렬이 된다면 최대값 최소값 또한 구할 수 있다.
약간의 장난을 해 볼 것이다.
sort 메서드를 reverse 처럼 사용할 수도 있다.
간단한 자바스크립트 예제를 만들어 본다.
<!DOCTYPE html>
<html>
<body>
<script>
/**
* 원본 배열
*/
let vNumber;
vNumber = [100, 1000, 10, 10000, 20, 300, 4000];
console.log('원본', typeof(vNumber), vNumber);
console.log('----------')
vNumber.sort(function(a, b){return a - b});
console.log('sort 비교함수 a-b', typeof(vNumber), vNumber);
console.log('----------')
vNumber.sort(function(a, b){return b - a});
console.log('sort 비교함수 b-a', typeof(vNumber), vNumber);
console.log('----------')
vNumber.reverse(function(a, b){return a - b});
console.log('reverse 비교함수 a-b', typeof(vNumber), vNumber);
console.log('----------')
vNumber.reverse(function(a, b){return b - a});
console.log('reverse 비교함수 b-a', typeof(vNumber), vNumber);
console.log('----------')
</script>
</body>
</html>sort 메서드와 reverse 메서드의 특징을 알고 비교함수의 뺄셈의 역할을 이해했다면 위의 코드가 4가지가 되는 경우를 알 수 있을 것이다.
결과화면을 보자.
맹점이 사라지고 제대로 정렬이 되는 것을 볼 수 있다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 배열 반복 foreach 메서드 사용 Using javascript iteration foreach method (0) | 2022.01.06 |
|---|---|
| 자바스크립트 배열 최대값 최소값 구하기 Find Max and Min value in Javascript Array (0) | 2022.01.04 |
| 자바스크립트 숫자 배열 정렬 Sorting Javascript Number Array (0) | 2022.01.02 |
| 자바스크립트 문자열 배열 정렬 Sorting Javascript Sring Array (0) | 2021.12.31 |
| 자바스크립트 배열의 요소 값 삭제하기 slice 메서드 (0) | 2021.12.29 |
댓글