[JavaScript] arr.sort() - 배열 요소를 오름차순, 내림차순으로 정렬하기 (ft. 숫자, 문자열, 객체)

Array.prototype.sort() 라는 배열 메서드는 대상 배열의 요소들을 오름차순, 내림차순으로 정렬해주는 메서드이다.

 

▷ 구문

arr.sort([compareFunction])

compareFunction : 정렬 순서를 정의하는 함수이다.

 - 생략할 경우 : 배열은 각 요소를 문자열로 변환하고 유니코드를 기준으로 정렬을 실시한다.

 - 사용할 경우 : 비교 후 반환 값에 따라 정렬된다.

• 일반적으로 compareFunction(a, b) 형식의 a, b 매개변수를 사용한다.
• 일반적으로 반환 값은 (1, 0, -1)을 사용한다.
• a, b를 비교해서 반환 값이 0보다 클 경우, b가 a보다 앞에 오도록 정렬한다.
• a, b 를 비교해서 반환값이 0을 반환할 경우, a와 b의 순서를 변경하지 않는다.
• a, b를 비교해서 반환 값이 0보다 작을 경우, a가 b보다 앞에 오도록 정렬한다.

---

▷ 예제 1) Array.prototype.sort() 기본 사용법

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// ["Dec", "Feb", "Jan", "March"]

const nums = [1, 30, 4, 21, 100000];
nums.sort();
console.log(nums);
// [1, 100000, 21, 30, 4]

구문을 통해 설명한 것처럼  sort() 메서드를 사용할 때 compareFunction을 생략할 경우 기본적으로 각 요소를 문자열로 변환하고 유니코드를 기준으로 정렬을 실시한다.

 

일반적으로 유니코드는 오름차순이기 때문에 months 배열의 경우 우리의 생각대로 정렬이 되었지만

nums의 경우 생각과 전혀 다르게 정렬된 것을 볼 수 있다.

 

이는 유니코드를 기준으로 정렬했기 때문인데, 그렇기 때문에 보통 숫자를 정렬할 때는 숫자끼리 비교를 하기위해 compareFunction을 사용하여 아주 간단하게 정렬을 실시한다.

 

▷ 예제 2) 숫자 오름차순, 내림차순 정렬하기

const nums = [1, 30, 4, 21, 100000];

// 숫자 오름차순
nums.sort((a, b) => {
    if(a > b) return 1;
    if(a === b) return 0;
    if(a < b) return -1;
});
console.log(nums); // [1, 4, 21, 30, 100000]

// 간략화한 숫자 오름차순 
nums.sort((a, b) => a - b);
console.log(nums); // [1, 4, 21, 30, 100000]

// 숫자 내림차순
nums.sort((a, b) => {
    if(a < b) return 1;
    if(a === b) return 0;
    if(a > b) return -1;
});
console.log(nums); // [100000, 30, 21, 4, 1]

// 간략화한 숫자 내림차순
nums.sort((a, b) => b - a);
console.log(nums); // [100000, 30, 21, 4, 1]

 

위 예제를 보면 구문에서 설명한 것처럼 a, b 를 비교하여 크거나, 작거나, 같을 때 반환하는 값을 달리 하여 오름,내림차순을 실시하였다.

 

그렇지만 숫자의 경우 a - b 나 b - a 같은 형식으로 아주 간단하게 간략화 할 수 있다.

숫자 끼리 뺄셈 연산을 실시하여 0이거나 0보다 크거나 0보다 작은 값을 반환할 수 있기 때문이다.

 

▷ 예제 3) 문자열 오름차순, 내림차순 정렬하기

const animals = ['dog', 'cat', 'wolf', 'elephant', 'monkey'];

// 오름차순
animals.sort();
console.log(animals); // ['cat', 'dog', 'elephant', 'monkey', 'wolf']

// 내림차순
animals.sort((a, b) => {
    if(a < b) return 1;
    if(a === b) return 0;
    if(a > b) return -1;
});
console.log(animals); // ['wolf', 'monkey', 'elephant', 'dog', 'cat']

 

문자열의 경우 compareFunction을 생략하면 어차피 유니코드로 정렬되기 때문에 오름차순으로 정렬된다.

내림차순의 경우 문자열을 비교해서 정렬하는데, 문자열끼리의 대소비교는 아스키코드를 기준으로 비교한다.

 

그치만 문자열의 경우 특히 영문의 경우 대소문자가 있기 때문에, 좀 더 정확하게 비교를 해주어야 한다.

소문자끼리 비교하거나, 대문자끼리 비교하거나 해주어야 한다.

 

다음 예제를 통해 알아보자.

 

▷ 예제 4) 문자열 대소문자 구분 없이 정렬하기

const animals = ['dog', 'cat', 'Wolf', 'Elephant', 'monkey'];

// 오름차순
animals.sort();
console.log(animals); // ['Elephant', 'Wolf', 'cat', 'dog', 'monkey']

// 대소문자 구분없이 오름차순 정렬
animals.sort((a, b) => {
    // toUpperCase() or toLowerCase() 사용
    const upperCaseA = a.toUpperCase();
    const upperCaseB = b.toUpperCase();

    if(upperCaseA > upperCaseB) return 1;
    if(upperCaseA === upperCaseB) return 0;
    if(upperCaseA < upperCaseB) return -1;
});
console.log(animals); // ['cat', 'dog', 'Elephant', 'monkey', 'Wolf']

// 대소문자 구분없이 내림차순 정렬
animals.sort((a, b) => {
    // toUpperCase() or toLowerCase() 사용
    const upperCaseA = a.toUpperCase();
    const upperCaseB = b.toUpperCase();

    if(upperCaseA < upperCaseB) return 1;
    if(upperCaseA === upperCaseB) return 0;
    if(upperCaseA > upperCaseB) return -1;
});
console.log(animals); // ['Wolf', 'monkey', 'Elephant', 'dog', 'cat']

 

대문자가 있는경우 소문자보다 아스키코드가 앞서기 때문에 오름차순으로 정렬할 경우 알파벳 순서로는 당연히 c가 e보다 앞에 있지만 E가 대문자이기 때문에 앞에 위치하는것을 볼 수 있다.

 

그래서 compareFunction을 이용해 toUpperCase()나 toLowerCase()를 사용해 대소문자 구분을 없애주어야한다.

 

▷ 예제 5) 객체 정렬하기

const items = [
    { name: 'Edward', value: 21 },
    { name: 'Sharpe', value: 37 },
    { name: 'And', value: 45 },
    { name: 'The', value: -12 },
    { name: 'Magnetic', value: 13 },
    { name: 'Zeros', value: 37 }
];
  
// value 기준으로 정렬
items.sort((a, b) => {
    if (a.value > b.value) return 1;
    if (a.value < b.value) return -1;
    return 0;
});
console.log(items);

// name 기준으로 정렬
items.sort((a, b) => {
    var nameA = a.name.toUpperCase();
    var nameB = b.name.toUpperCase();
    if (nameA < nameB) return -1;
    if (nameA > nameB) return 1;
    return 0;
});
console.log(items);

 

숫자와 문자열 정렬과 마찬가지로 그냥 객체에서 기준값을 정해 그 값으로 비교를 해주면 된다.

---

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Array.prototype.sort() - JavaScript | MDN