Array.sort()에 대해 알아보자.

sort()?

배열의 원소들을 콜백함수의 결과에 따라 정렬해 주는 매서드

예를 들어, [1,4,2,3,5]라는 배열을 오름차순으로 정렬해 [1,2,3,4,5] 혹은 내림차순으로 [5,4,3,2,1] 이런 식으로 정리할 수 있다. 특징으로는 원본배열 자체를 정렬해 버리 때문에 원본이 변경되는 걸 원하지 않는 경우엔 배열을 복사 후 사용해야 한다.

 

구문

sort()
sort(compareFn)

 

compareFn 은 정렬 순서를 정해주는 함수로, 매개변수 a와 b를 갖고는데, a는 비교할 첫 번째 원소, b는 비교할 두 번째 원소다.

 

compareFn 내부에서 a와 b를 비교해서 음수, 0, 양수를 리턴해주면

음수일 경우 b를 앞으로, 0일 경우는 그대로, 양수일 경우 a를 앞으로 리턴해준다.

이를 이용해 리턴값을 a-b 혹은 b-a로 내보내 오름차순 혹은 내림차순 정렬이 가능하다.

 

+추가로, for문 등으로 별도의 정렬 알고리즘을 사용하는 것보다 sort() 매서드를 사용하는 것이 대부분의 경우에 더 빠르다.

(데이터의 형태를 파악하고 최적의 알고리즘을 사용할 자신이 없다면 sort() 대체로 빠름)

 

기본 사용법

기본적으로 오름차순으로 정렬을 하게 된다.

const numberArr = [3,2,1,4,5,7,6,8];

numberArr.sort(); //기본값은 오름차순 정렬
//[1, 2, 3, 4, 5, 6, 7, 8]

numberArr.sort((a,b) => a-b); // a에서 b를 뺀 값을 리턴한다.
//[1, 2, 3, 4, 5, 6, 7, 8]

numberArr.sort((a,b) => b-a); // b에서 a를 뺀 값을 리턴한다.
//[8, 7, 6, 5, 4, 3, 2, 1]

//- - -

const charArr = ["c","C","B","b","a","하","바","마"];

charArr.sort(); //기본값은 오름차순 정렬
//['B', 'C', 'a', 'b', 'c', '마', '바', '하']

charArr.sort((a,b) => a-b); // 문자열은 빼기가 안되므로 수식이 적용하지 못함.
//["c","C","B","b","a","하","바","마"]

charArr.sort((a,b) => b-a); // 문자열은 빼기가 안되므로 수식이 적용하지 못함.
//["c","C","B","b","a","하","바","마"]

// * charCodeAt() 매서드로 문자를 유니코드로 변환하여 비교가 가능하다.

 

주의 1. 원소를 문자열로 변경 후 비교

배열의 원소를 문자열로 변경해서 비교하기 때문에, 의도치 않은 결과가 생길 수 있다.

let arr = [14, 2, 43, 31, 7];

arr.sort();
//[14, 2, 31, 43, 7]
// 제일 앞 문자를 기준으로 오름차순 해버림

arr.sort((a,b) = a-b);
// [2, 7, 14, 31, 43]
//a-b로 숫자형으로 변환되어 제대로 정렬

많이 실수하는 부분이므로 주의해서 사용하자.

 

주의 2. 원본 배열을 변경함

또, 위에서도 말했지만 원본배열이 변경된다. 

const a = [5,4,3,2,1]
const b = a.sort();

console.log(a);
//[1, 2, 3, 4, 5]
console.log(b);
//[1, 2, 3, 4, 5]

이게 싫다면 아래와 같이 간단하게 배열을 복사해서 사용하자.

const a = [5,4,3,2,1]
const b = [...a].sort();

console.log(a);
//[5, 4, 3, 2, 1]
console.log(b);
//[1, 2, 3, 4, 5]

 

사용예제 - 간단한 문자열 오름차순/내림차순 정렬

const fruitList = ["pineApple", "apple", "orange", "banana"];

//1. 오름차순
fruitList.sort();
//['apple', 'banana', 'orange', 'pineApple']

//2. 내림차순
// sort() 이후 reverse()매서드를 이용해서 뒤집어준다.
fruitList.sort().reverse();
//['pineApple', 'orange', 'banana', 'apple']

 

사용예제 - 객체로 이루어진 배열에서 특정값으로 비교

const userData = [
    { name: "c", age: 24 },
    { name: "a", age: 24 },
    { name: "b", age: 27 }
]


// 나이순으로 오름차순 정렬
userData.sort((a,b) => {
	return a.age - b.age;
})

/*
[
    { "name": "c", "age": 24 },
    { "name": "a", "age": 24 },
    { "name": "b", "age": 27 }
]
*/

 

사용예제 - 객체로 이루어진 배열에서 특정값으로 비교 / 같을 경우 두 번째 비교값 지정

const userData = [
    { name: "c", age: 24 },
    { name: "a", age: 24 },
    { name: "b", age: 27 }
]


// 나이순으로 오름차순 정렬하고, 나이가 같으면 이름 오름차순으로 정렬
userData.sort((a,b) => {
    if(a.age === b.age){
        return a.name.charCodeAt() - b.name.charCodeAt() // charCodeAt() 매서드로 유니코드로 변환
    }else{
        return a.age - b.age;
    }
})

/*
[
    { "name": "a", "age": 24 },
    { "name": "c", "age": 24 },
    { "name": "b", "age": 27 }
]
*/

// 나이순으로 내림차순 정렬하고, 나이가 같으면 이름 오름차순으로 정렬
userData.sort((a,b) => {
    if(a.age === b.age){
        return a.name.charCodeAt() - b.name.charCodeAt() // charCodeAt() 매서드로 유니코드로 변환
    }else{
        return b.age - a.age;
    }
})

/*
[
    { "name": "b", "age": 27 },
    { "name": "a", "age": 24 },
    { "name": "c", "age": 24 },   
]
*/

 

MDN - Array.prototype.sort()

Array.prototype.sort() - JavaScript | MDN