[JavaScript] 정렬 함수(reverse, sort)에 대해 알아보자!

💡 목표

JavaScript에서 배열을 정렬하는 방법에 대해 학습한다.

1.  *Reverse 함수: 원소 반대로 나열

let arr1 = [1, 2, 3, 4];

위와 같이 배열 객체를 생성하는 동시에 초기화했습니다.

let arrReverse = arr1.reverse();
console.log(arr1); // [ 4, 3, 2, 1 ]
console.log(arrReverse); [ 4, 3, 2, 1 ]

Reverse 함수는 배열의 원소를 거꾸로 나열하며 원본 데이터까지 수정합니다.

즉, reverse 함수의 반환된 데이터뿐만 아니라 원본 데이터인 배열 arr의 원소 역시 반대로 나열됩니다.

2.  sort 함수: 정렬 함수 정의 필요

2.1.  배열 정렬

let arr2  = [103, 273, 32, 52];

위와 같이 배열 객체를 생성하는 동시에 초기화했습니다.

function sortArray(a, b){
    // >: 오름차순 정렬(a -b)
    // <: 내림차순 정렬(b- a)
    return a -b;
}

위와 같이 정렬을 위한 함수를 따로 정의하고 이를 sort 함수에 넘겨주어야 정확하게 정렬이 가능합니다.

전달인자 a, b가 있을 때, 오름차순 정렬을 원하면 반환값에 a-b를, 내림차순 정렬을 원하면 b-a를 입력합니다.

arr2.sort(sortArray);
console.log("arr2: ", arr2); // 32, 52, 103, 273

2.2.  객체 정렬

let arr3 = [
    {
        age: 31,
        name: 'tony'
    }, 

    {
        age: 19,
        name: 'paul'
    },

    {
        age: 25,
        name: 'john'
    },
]

위와 같이 객체를 생성하는 동시에 초기화했습니다.

function sortObject(a, b){
    return a.age - b.age;
}

객체 내 특정 key 값에 따라 정렬하는 함수 예시입니다.

이처럼 정렬 시 함수를 활용하면 상황에 맞게 배열을 정렬할 수 있다는 장점이 있습니다.

arr3.sort(sortObject);
console.log(arr3);

결과를 출력하면 아래와 같습니다.

[
  { age: 19, name: 'paul' },     
  { age: 25, name: 'john' },     
  { age: 31, name: 'tony' }   
]

(Optional) 그렇다면 sort 함수만 사용하면 어떻게 될까?

만약 자바나 파이썬처럼 sort 함수만 사용하여 정렬하면 어떻게 될까요?

잘못된 정렬 예시1

let arr4 = [80, 20, 10, 15];
arr4.sort();
console.log(arr4); // [10, 15, 20, 80]

위에 예시 코드에서 결괏값만 보면 정렬이 정확하게 된 것처럼 보입니다.

하지만 이는 틀린 예제입니다.

다음 예제를 계속 살펴보죠.

잘못된 정렬 예시2

let arr5 = [103, 273, 32, 52];
arr5.sort();
console.log(arr5); // [103, 273, 32, 52]

앞선 예제에서는 오름차순으로 정렬이 잘 되었는데 이번 예제에서는 정렬이 수행되지 않았죠.

사실은 정렬이 된 상태입니다.

sort 함수는 원소를 문자열로 취급하고 맨 앞 글자부터 하나씩 비교하여 정렬합니다.

즉, 이번 1번 예시에서는 맨 앞 문자열 1, 2, 8 순으로 원소를 정렬하고,

10과 15는 원소마다 두 번째 문자열인 0과 5를 비교하여 정렬합니다.

이처럼 sort 함수만 사용하면 숫자의 크기라는 맥락 정보를 반영하지 못 합니다.

따라서 정확한 정렬을 위해서는 sort 함수와 함께 적절한 함수를 추가로 활용해야 합니다.

---

 

포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요!

그럼 오늘도 즐겁고 멋진 만드시길 바랍니다.

고맙습니다 :-)