[Javascript] sort 배열 정렬 (오름차순, 내림차순, 날짜 정렬, 객체 배열 정렬, 효율성)

[ 서론 ]

 

평소 내가 개발 및 관리하는 대부분의 구조는 Back 단과 Front 단이 나뉘어저 있다.
Back 단은 jar 파일로 되어있어 한 글자라도 수정을 해야 하는 경우 서비스를 내렸다가 다시 올려야 하는 불편함이 있다.

이번에는 데이터를 정렬하는 문제가 있어 수정해달라는 간단한 문제가 있었다.

물론 데이터를 정렬하는데 있어 백엔드에서 해야 성능 효율성, 데이터 전송 및 네트워크 효율성, 보안 등 훨씬 좋지만 정렬 데이터가 많아야 10개 뿐인데 백엔드를 수정하기 싫어 그냥 프론트단에서 바꾸자 마자 바로 적용될 수 있는 방법을 수행하였다.

 

[ 코드 예제 ]

 

해당 체널값을 출력해주는 프론트 단에서 날짜별로 내림차순 해달라는 간단한 내용이였다.

<% if(locals.channelList){ %>
                <% channelList.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)); %>
               <% for(let i=0;i<channelList.length;i++){ %> 
<tr>
                    <td>
                        <div class="custom_check type_1">
                        </div>
                    </td>
                    <td><a href="javascript:void(0);" onclick="fncChannelInfo(<%=JSON.stringify(channelList[i])%>);"><%=channelList[i].uuid%></a></td>
                    <td class="number"><%=channelList[i].createdAt.replace(/\//gi,"-")%></td>
                </tr>
                
               <% } %>
 <% } %>

 

 channelList 배열에서 createdAt (날짜) 값을 기준으로 내림차순 정렬을 하였다. 해당 구체적인 내용은 아래에서 보겠다.

 

 

 

 

JavaScript의 sort 함수는 배열의 요소를 정렬할 때 사용되는 매우 유용한 메서드다. 이 함수는 원본 배열을 정렬된 배열로 변환한다. 아래에서는 sort 함수의 사용법과 동작 원리를 구체적으로 설명하겠다

 

기본 사용법

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits); // ["Apple", "Banana", "Mango", "Orange"]

 

기본적으로 sort 메서드는 배열의 요소를 문자열로 변환한 후 유니코드 코드 포인트 순서로 정렬한다.

 

 

숫자 배열 정렬

숫자 배열을 정렬할 때 기본 sort를 사용하면 예상치 못한 결과가 발생할 수 있다.

let numbers = [4, 2, 5, 1, 3];
numbers.sort();
console.log(numbers); // [1, 2, 3, 4, 5]

 

위의 경우는 제대로 작동하지만, 다음 예제를 보면

 

let numbers = [10, 2, 30, 21];
numbers.sort();
console.log(numbers); // [10, 2, 21, 30]

 

이유는 sort 함수가 요소들을 문자열로 취급하여 유니코드 코드 포인트 순서로 정렬하기 때문이다.

 

비교 함수 사용

숫자 배열을 올바르게 정렬하려면 비교 함수를 제공해야 한다.

let numbers = [10, 2, 30, 21];
numbers.sort((a, b) => a - b);
console.log(numbers); // [2, 10, 21, 30]

 

비교 함수의 동작 방식

비교 함수는 두 개의 인수 a와 b를 받는다. 반환 값에 따라 정렬 순서가 결정된다

• 음수 : a가 b보다 앞에 위치
• 0: a와 b의 위치 변경 없음
• 양수 : a가 b보다 뒤에 위치

예를 들어

let numbers = [10, 2, 30, 21];

// 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // [2, 10, 21, 30]

// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // [30, 21, 10, 2]

 

 

객체 배열 정렬

객체 배열을 정렬할 때는 객체의 특정 속성을 기준으로 정렬할 수 있다.

예를 들어, 다음과 같은 객체 배열이 있다고 가정해보면

 

let items = [
    { name: "John", age: 25 },
    { name: "Jane", age: 22 },
    { name: "Jim", age: 27 }
];

 

이를 age 속성을 기준으로 오름차순 정렬하려면

 

items.sort((a, b) => a.age - b.age);
console.log(items);
// [
//     { name: "Jane", age: 22 },
//     { name: "John", age: 25 },
//     { name: "Jim", age: 27 }
// ]

 

 

날짜 정렬

날짜를 정렬할 때도 마찬가지로 비교 함수를 사용한다.

예를 들어, 다음과 같은 날짜 문자열 배열이 있다고 가정해보면

 

let dates = [
    "2023-06-27",
    "2021-01-12",
    "2022-05-19"
];

 

이를 날짜 순으로 정렬하면

dates.sort((a, b) => new Date(a) - new Date(b));
console.log(dates); // ["2021-01-12", "2022-05-19", "2023-06-27"]

 

 

정리

• sort()는 기본적으로 문자열 유니코드 순서로 정렬한다.
• 숫자 배열이나 특정 기준으로 정렬하려면 비교 함수를 제공해야 한다.
• 비교 함수는 두 인수를 비교하고, 0보다 작으면 첫 번째 인수를, 0보다 크면 두 번째 인수를, 0이면 위치를 변경하지 않는다.
• 객체 배열이나 날짜 배열도 비교 함수를 통해 정렬할 수 있다.