[JavaScript] Sort 오름차순, 내림차순

자바스크립트는 배열의 내장 함수로 정렬해 주는 함수를 가지고 있습니다.

이를 sort()라고 하는데요 이에 대한 포스팅을 해보겠습니다.

Array.prototype.sort()

Array.prototype.sort()

 

var a = [2, 3, 1, 2, 5, 6];
a.sort() // [1, 2, 3, 4, 5, 6]

간단하게는 이렇게 사용 됩니다.

그러나 여기서 몇가지 문제가 발생합니다.

var a = [1, 10000, 100, 3, 5, 4]
a.sort() // [1, 100, 10000, 3, 4, 5]

이런식으로 배열의 요소가 있다면 제대로 정렬되지 않습니다. 이유는 바로 그냥 첫번째 숫자만 비교하는 것을 알 수 있죠.

그렇다면 이것을 제대로 정렬하려면 몇가지 변수가 필요합니다.

var a = [1, 10000, 100, 3, 5, 4]
a.sort((a, b) => {
    if (a > b) {
        return 1;
    }
    if (a < b) {
        return -1;
    }

    return 0;
}) //  [1, 3, 4, 5, 100, 10000]

이런식으로 작성해주면 됩니다.

compareFunction(a, b) 가 0 보다 작은 경우, a를 먼저 오게 합니다.
compareFunction(a, b) 가 0 인 경우는 순서를 바꾸지 않습니다.
compareFunction(a, b) 가 0 보다 큰 경우, b를 먼저 오게 합니다.

 

따라서 오름차순으로 정렬하기 위해서는

var a = [1, 10000, 100, 3, 5, 4]
a.sort((a, b) => {
    if (a > b) {
        return 1;
    }
    if (a < b) {
        return -1;
    }

    return 0;
}) //  [1, 3, 4, 5, 100, 10000]

또는

var a = [1, 10000, 100, 3, 5, 4]
a.sort((a, b) => {return a - b}); // [1, 3, 4, 5, 100, 10000]

이런식이 됩니다. 실제 함수 안에서 로그를 찍어보면 처음에 a = 1000, b = 1 이런식으로 찍히게 되는데,

함수에 따라서 a > b 가 되고 return 1 또는 return 양수를 하기 때문에 b를 먼저 오게 합니다.

 

반대로 내림차순은 위와 반대로 적어주면 되겠죠?

var a = [1, 10000, 100, 3, 5, 4]
a.sort((a, b) => {
    if (a > b) {
        return -1;
    }
    if (a < b) {
        return 1;
    }

    return 0;
}) //  [10000, 100, 5, 4, 3, 1]

var a = [1, 10000, 100, 3, 5, 4]
a.sort((a, b) => {return b - a}); // [10000, 100, 5, 4, 3, 1]

 

이와 마찬가지로 객체 역시 정렬을 할 수 있습니다.

 index key 에 따른 오름차순

var object = [{index: 1}, {index: 1000}, {index: 100}, {index: 3}, {index:5}, {index: 4}]
object.sort((a, b) => {
    return a.index - b.index;
})

// 0: {index: 1}
// 1: {index: 3}
// 2: {index: 4}
// 3: {index: 5}
// 4: {index: 100}
// 5: {index: 1000}

 

index key 에 따른 내림차순

var object = [{index: 1}, {index: 1000}, {index: 100}, {index: 3}, {index:5}, {index: 4}]
object.sort((a, b) => {
    return b.index - a.index;
})

// 0: {index: 1000}
// 1: {index: 100}
// 2: {index: 5}
// 3: {index: 4}
// 4: {index: 3}
// 5: {index: 1}