[JavaScript] 배열의 원소를 정렬해주는 sort() 함수

숫자 정렬하기

오름차순 정렬 (1 → 2 → 3)

const arr = [2, 4, 1, 3];

// #1
arr.sort(); // [1, 2, 3, 4]

// #1-1
const arr2 = [2, 4, 10, 1];
arr2.sort(); // [1, 10, 2, 4];

// #2
const compare = (a, b) => {
    return a - b;
}
arr.sort(compare); // [1, 2, 3, 4]
arr2.sort(compare); // [1, 2, 4, 10]

// #3
arr.sort((a, b) => {
    return a - b; // [1, 2, 3, 4]
})

#1 : 배열의 원소가 단순히 숫자들뿐이고 오름차순으로 정렬하기 원한다면, sort()만 써줘도 무방하다.

#1-1 : 한 가지 간과한 게 있다면, sort()는 유니코드 기준으로 순서를 정렬한다는 점이다. 따라서, 2보다 10이 더 크지만, 1이 2보다 유니코드 순서상 앞에 있기 때문에 [1, 10, 2, 4]의 결과가 나온다.

#2 : sort() 함수 안에는 compare 비교 함수를 넣어줄 수 있다. compare 함수는 a, b 2개의 인자를 받으며, return 값이 0보다 작을 경우 a가 b보다 앞에 오도록 정렬하고, 0보다 클 경우 a가 b보다 뒤에 오도록 정렬한다. (이 방법을 통해 #1-1의 문제도 해결할 수 있다.)

#3 : compare 함수를 만들고 sort()에 집어넣는 과정 대신 화살표 함수를 사용하면 직관적이고 쉽게 할 수 있다.

 

내림차순 정렬 (3 → 2 → 1)

const arr = [2, 4, 1, 3];

// #1
const compare = (a, b) => {
    return b - a;
}
arr.sort(compare); // [4, 3, 2, 1]

// #2
arr.sort((a, b) => {
    return b - a; // [4, 3, 2, 1]
})

#1, #2 : 오름차순 정렬과 형식은 같다. 대신 a와 b의 순서를 바꿔주기만 하면 된다.

 

문자 정렬하기

오름차순 정렬(가 → 나 → 다)

const arr = ['나', '다', '라', '가'];

// #1
arr.sort(); // ['가', '나', '다', '라']

// #2
function compare(a, b){
    if (a > b) return 1;
    if (a === b) return 0;
    if (a < b) return -1;
}
arr.sort(compare); // ['가', '나', '다', '라']

// #3
arr.sort((a, b) => {
    if (a > b) return 1;
    if (a === b) return 0;
    if (a < b) return -1;
}); // ['가', '나', '다', '라']

#1 : sort()는 기본적으로 유니코드 순서를 따르기 때문에, default가 오름차순이라고 봐도 된다.

#2 : if문을 통해 a와 b의 순서를 임의로 정렬시킬 수 있다. 이해하기 쉽게 표현하자면, 정렬하는 순서를 [-1, 0, 1]이라고 생각해보자. 임의의 숫자 a와 b가 있다고 할 때, a가 b보다 클 경우 1을 반환해서 뒷 자리로 보낸다. (-1, 0, 1 셋 중에 1이 제일 뒤에 있기 때문에) 이런 원리로 0이면 원래 자리를 유지하고, -1이면 앞으로 보낸다.

#3 : compare 함수를 선언하고 넣어주는 것보다 화살표 함수를 이용하면 더 쉽게 사용할 수 있다.

 

내림차순 정렬(다 → 나 → 가)

const arr = ['나', '다', '라', '가'];

// #1
function compare(a, b){
    if (a < b) return 1;
    if (a === b) return 0;
    if (a > b) return -1;
}
arr.sort(compare); // ['라', '다', '나', '가']

// #2
arr.sort((a, b) => {
    if (a < b) return 1;
    if (a === b) return 0;
    if (a > b) return -1;
}); // ['라', '다', '나', '가']

#1, #2 : 오름차순 정렬과 형식은 같다. 대신 부등호를 바꿔주기만 하면 된다.

 

객체 정렬하기

const arr = [
    {name: '홍길동', age: 19},
    {name: '김철수', age: 24},
    {name: '이영희', age: 33},
    {name: '박민준', age: 13}
];

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

// 나이 기준으로 내림차순 정렬
arr.sort((a, b) => {
    return b.age - a.age;
})

// 이름 기준으로 오름차순 정렬
arr.sort((a, b) => {
    if (a.name > b.name) return 1;
    if (a.name === b.name) return 0;
    if (a.name < b.name) return -1;
})

// 이름 기준으로 내림차순 정렬
arr.sort((a, b) => {
    if (a.name < b.name) return 1;
    if (a.name === b.name) return 0;
    if (a.name > b.name) return -1;
})

객체 정렬하는 방법은 따로 없다. 객체도 숫자아니면 문자로 되어있기 때문에 위에서 숫자와 문자 정렬하는 방법과 똑같다.

객체를 정렬할 때 객체 안의 기준이 되는 key 값이 있을텐데, 그 key의 value가 문자 타입인지 숫자 타입인지에 따라서 적합한 방법을 선택하면 된다.

 

1. 정렬하고 싶은 배열의 원소가 숫자일 때 return a - b (오름차순), return b - a (내림차순)
2. 정렬하고 싶은 배열의 원소가 문자일 때 if문을 이용하여 1, 0, -1을 반환하자.