에르노트

[자바스크립트] 배열 정렬 함수 sort() 본문

Web/Javascript

[자바스크립트] 배열 정렬 함수 sort()

두콩 2020. 10. 1. 17:44

Javascript

자바스크립트 배열에는 sort() 함수가 내장되어 있다. 따라서 우리는 별도로 정렬 메소드를 작성하지 않고도 손쉽게 배열의 원소들을 정렬할 수 있다. 이때 정렬 기준을 지정하기 위해 비교 함수(compare function)을 인자로 받는다.

 

다음은 ECMAScript의 Array.prototype.sort(comparefn) 에 대한 최신 명세이다.

The elements of this array are sorted. The sort must be stable (that is, elements that compare equal must remain in their original order). If comparefn is not undefined, it should be a function that accepts two arguments x and y and returns a negative value if x < y, zero if x = y, or a positive value if x > y.

우선 sort() 메소드는 stable sort로 구현되어야 한다. 그리고 비교 함수의 반환값에 따라 비교 우위를 판단한다. 이때 비교 함수가 정의되지 않았다면 알파벳순(아스키코드 값)으로 비교한다. 따라서 숫자에 대한 정렬이 제대로 동작하지 않을 것임을 예상할 수 있는데, 수의 세계에서는 12>2 이지만 알파벳 사전순으로는 12<2이기 떄문이다.

 

그래서 숫자순 오름차순으로 정렬하고 싶다면 아래와 같이 비교 함수를 작성해주면 된다. 여러번 사용할 경우 따로 만들어둘 수도 있지만 보통 익명 함수 형태로 많이 사용한다.

 

let arr = [1,2,3,12,23,34]

console.log(`기본 정렬: ${arr.sort()}`)

console.log(`숫자 정렬: ${arr.sort(function(x,y){
    return x-y
})}`)

실행 결과

비교 함수의 반환값 x-y는 오름차순 정렬을 나타낸다. 인자로 받은 x,y에 대해 x-y가 음수이면(x<y)이면 x가 더 작은 값이라고 간주하기 때문이다. 반대로 x-y가 양수이면(x>y) x가 더 큰 값이라고 간주한다. 따라서 내림차순으로 정렬하고 싶다면 x-y 대신 y-x를 리턴하면 된다.


비교 함수를 응용하면 다양한 기준으로 원소들을 정렬할 수 있다.

1. 문자열 길이순으로 정렬

let arr = ['a', 'ab', 'abc', 'dabc']
console.log(arr.sort((x,y)=>x.length-y.length)) 

실행 결과

비교 함수의 반환값으로 각 원소의 길이의 차를 넣어줌으로써 원소들의 문자열 길이순으로 오름차순 정렬할 수 있다.

2. 객체의 프로퍼티 개수 순으로 정렬

class None{}

class Person{
    constructor(){
        this.age = 10
        this.name = 'Tom'
    }
}

class Worker extends Person{
    constructor(){
        super()
        this.salary = 10000
    }
}

let arr = [new Person(), new None(), new Worker()]
console.log(arr.sort((x,y)=>Object.keys(x).length-Object.keys(y).length))

실행 결과

None, Person, Worker 클래스는 각각 프로퍼티를 0개, 1개, 2개 가지고 있다. Object.keys() 메소드는 객체를 받아서 그 객체의 프로퍼티 이름들로 배열을 구성해준다. 따라서 이를 응용하면 위와 같이 객체의 프로퍼티 개수 순으로도 정렬 함수를 작성할 수 있다. 그러므로 최종 결과는 None{}, Person{}, Worekr{} 순이 된다.

Comments