[Javascript] 제대로 된 문자, 숫자, 배열 객체 원소 정렬을 사용하는 방법

안녕하세요.

회사에서 <table>에 문자와 숫자를 정렬하는 기능을 추가해야 했습니다.

v-data-table

vuetify의 <v-data-table>에는 정렬 기능이 기본적으로 있어서 처음엔 <v-data-table>을 사용했었습니다. 그런데, 표에 <table>의 <td>에 checkbox까지 들어가야 하는 디자인의 요구사항이 있었습니다. 물론 <v-data-table>에도 <td>에checkbox를 넣고 사용할 수 있는 기능이 있지만, 디자인대로 구현하기에는 어려움이 있었습니다.

 

그래서, 차라리 테이블의 목록을 정렬하는 기능을 제가 만드는 것이 낫겠다고 생각했습니다.

그래서 이번 포스팅에서는 Javascript를 사용해서 api를 통해서 받아온 [{},{},{} ...] 배열을 어떻게 정렬을 하는지에 대해서 알아보기 위해서 이번 문서를 작성하게 되었습니다. 

재미있게 봐주세요.

 

*목차

1. Javascript 내장 정렬 함수 알아보기

2. 문자열 정렬

3. 숫자 정렬

4. 배열 내 객체 원소 정렬[{}, {}, {} ...]

1. Javascript 내장 정렬 함수 알아보기

Array.prototype.sort() - Javascript | MDN 참고

일단, Javascript에는 내장되어 있는 정렬 함수가 있습니다.

MDN문서에 따르면..

sort()
 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다.
정렬은 stable sort가 아닐 수 있습니다. 
기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.

코드.

let arr = [10, 9, 4, 1]
arr.sort()

console.log(arr)  // 결과 : 1, 10, 4, 9

문자, 숫자 상관없이 유니코드 순서대로 정렬됩니다.

그래서, 문자와 숫자를 비교할려면, 저렇게 함수만 사용하면 안됩니다. sort()괄호 안에 정렬에 사용할 함수를 넣어줘야 합니다.

위에 적힌 코드대로만 크롬 개발자도구에서 실행하면, 결과는 숫자 순으로 정렬되지 않은 배열이 나옵니다.

단순 sort()함수만 사용한 경우.

정렬이 안되어 있죠? sort()함수는 숫자의 크기를 비교하지 않았습니다. 유니코드 코드 포인트를 따랐기 때문입니다.

그리고, 예시 코드를 보면 아시겠지만, sort()함수를 사용하면, 원본 배열이 정렬이 되는 겁니다. 복사본이 만들어 지진 않습니다.

그럼, 이제부터 sort()함수에 비교 함수를 추가해서 문자 정렬과 숫자 정렬을 하는 방법을 알아보겠습니다.

 

2. 문자열 정렬

아래 코드가 문자열을 정렬하기 위한 코드입니다.

//문자열 오름차순 정렬
let arr = ['DC', 'DA', 'C', 'B'];
arr.sort(function(a, b){ 
    if(a > b) return 1;
    if(a < b) return -1;
    if(a === b) return 0;
});
console.log(arr); // ["B", "C", "DA", "DC"]

//문자열 내림차순 정렬
let arr = ['a', 'b', 'c'];
arr.sort(function(a, b){ 
    if(a < b) return 1;
    if(a > b) return -1;
    if(a === b) return 0;
});
console.log(arr); // ["c", "b", "a"]

ex) 문자열 오름차순 정렬 예시

오름차순일 경우 반환 조건은 다음과 같습니다.

a > b return 1

a < b return -1

 

ex) 문자열 내림차순 정렬 예시

내림차순일 경우 반환 조건은 다음과 같습니다.

a < b return 1

a > b return -1

 

만약 앞에 글자가 같다면, 바로 뒤의 글자와 비교를 해줍니다. 아래 코드로 실험해 봤습니다.

 

1-1. 대소문자 구분 없이 오름차순 정렬

대소문자 구분 없이 정렬을 해주는 함수 설정은 없습니다. 

ABCD -> abcs로 바꾸던지, abcd -> ABCD로 변경해서 정렬이 되도록 해줘야 합니다.

> 정렬 함수 알아보기

 

toLowerCase()와 toUpperCase()함수를 사용해서 정렬함수를 적용한 코드는 다음과 같습니다.

//소문자로 변환해서 오름차순 정렬
let arr = ['dC', 'dA', 'C', 'D'];
arr.sort(function(a, b){ 
	
    if(a.toLowerCase() > b.toLowerCase()) return 1;
    if(a.toLowerCase() < b.toLowerCase()) return -1;
    if(a.toLowerCase() === b.toLowerCase()) return 0;
});
console.log(arr); // ["C", "D", "dA", "dC"]

//대문자로 문자열 내림차순 정렬
let arr = ['dC', 'dA', 'C', 'D'];
arr.sort(function(a, b){ 
    if(a.toUpperCase() < b.toUpperCase()) return 1;
    if(a.toUpperCase() > b.toUpperCase()) return -1;
    if(a.toUpperCase() === b.toUpperCase()) return 0;
});
console.log(arr); // ["dC", "dA", "D", "C"]

 

1-2. 대소문자 구분해서 오름차순 정렬

몰라오

3. 숫자 정렬

숫자 오름차순 정렬

//숫자 오름차순
let arr = [19, 3, 1, 10]
arr.sort(function(a,b) { a - b});

console.log(arr);  // [1, 3, 10, 19]

숫자 내림차순 정렬

//숫자 내림차순 정렬
let arr = [1, 2, 3, 4, 5, 6]
arr.sort(function(a,b) { b - a });

console.log(arr); // 결과 : [6, 5, 4, 3, 2, 1]

 

4. 배열 내 객체 원소 정렬[{}, {}, {} ...]

객체 원소 정렬을 하는 방법이 제가 실무에서 사용한 테이블 목록을 정렬하는 방법이었습니다.

객체 내부의 특정 원소 값을 비교해서 정렬을 하는 방법입니다.

const arr = [ 
	{name: 'banana', price: 3000}, 
    	{name: 'apple', price: 1000}, 
    	{name: 'orange', price: 500} 
    ]; 
arr.sort(function(a, b) { 
	return a.price - b.price; 
    });

 

 

 

우측 상단에 구독 부탁드립니다.

감사합니다.