[JS] 자바스크립트 배열 정렬, 조금 남다른 Array.sort()

자바스크립트 내장 객체 Array

자바스크립트에 내장되어있는 객체로 단일 변수명 아래 여러 항목을 모아서 저장 가능하다.

Description

• 서로 다른 데이터 유형을 혼합하여 저장할 수 있다.
• 0부터 인덱스를 제공한다.
• 사이즈 리사이징이 가능하다.

다른 프로그래밍 언어와 마찬가지로 자바스크립트도 배열을 제공하고 있다.

Array 객체는 다양한 메서드를 가지고 있는데 그중 오늘 살펴볼 녀석은 sort()이다.

Array.prototype.sort() 특징

• 기본 오름차순 정렬
• 기존 배열을 정렬 (따라서 기존 배열이 변경됨. 기존배열을 보존하고 복사본을 만들어서 정렬하고 싶다면 toSorted()를 사용하자)
• 매개변수로 비교함수를 가진다. (필수는 아님)
• 문자열로 변환한 다음 UTF-16 code 단위 값으로 비교하여 정렬한다.
• undefined 요소가 있다면 맨 끝으로 정렬 된다.

Array.prototype.sort() 사용 예시

const stringArray = ["Blue", "Humpback", "Beluga"];
const numberArray = [40, 1, 5, 200];

console.log("unsorted > ",stringArray)
stringArray.sort()
console.log("sorted > ", stringArray)
/** 출력 결과
 * unsorted >  [ 'Blue', 'Humpback', 'Beluga' ]
 * sorted >  [ 'Beluga', 'Blue', 'Humpback' ] 
 */

console.log("unsorted > ",numberArray)
numberArray.sort()
console.log("sorted > ", numberArray)
/** 출력 결과
 * unsorted >  [ 40, 1, 5, 200 ]
 * sorted >  [ 1, 200, 40, 5 ]
 */

 

출력 결과를 살펴보면 sort가 sort를 하지 못한다.
자바스크립트의 sort()메소드는 배열의 값을 문자열로 바꾼다음 유니코드 값에 따라 정렬하기 때문에
숫자를 정렬하기 위해서는 별도의 비교 함수를 매개변수로 넘겨주어야 한다.

숫자 값도 정상적으로 정렬되는 다음 예시를 살펴보자.

const numberArray = [40, 1, 5, 200];

function compare(a,b){
    return a-b
}

console.log("unsorted > ",numberArray)
numberArray.sort(compare)
console.log("sorted with compare function > ", numberArray)
/** 출력 결과
 * unsorted >  [ 40, 1, 5, 200 ]
 * sorted with compare function >  [ 1, 5, 40, 200 ]
 */

// 동일하게 메소드 매개변수 자리에 바로 함수를 작성해 주어도 된다. 
numberArray.sort(function(a,b){
    return a-b
})

numberArray.sort((a,b)=>{
    return a-b
})

numberArray.sort((a,b)=>a-b)

 

compare(a, b)라는 매개변수에 넘겨줄 함수를 작성하고 실행하면 정상적으로 비교된다.

sort()메소드는가 매개변수로 받는 비교함수는 두개의 인자를 받는다.
리턴 값에 따라 이 두값을 정렬하게 되는데 만약 0이 리턴되면 각 인자의 위치 고정, 음수가 리턴된다면
두 인자 중 앞의 인자가 작으므로 앞의 인자를 앞쪽에 두게 된다.
양수가 나온다면 뒤의 인자가 더 큰것으로 보고 오름차순 정렬기준으로 뒤의 인자가 앞으로 , 앞의 인자가 뒤로 오게 된다.

 

Reference

developer.mozilla.org