[JS] 배열 정렬 방법 (오름차순, 내림차순)

자바스크립트에서 숫자, 문자열, 객체 배열을 정렬하는 방법!

 

1. 숫자 배열 정렬

const arr = [23, 15, 2, 9, 1, 3];

arr.sort(); // [1, 15, 2, 23, 3, 9];

숫자 배열에 단순히 sort() 를 적용하면 숫자를 문자열로 반환해 정렬함

이때 문자열 "11"은 "2"보다 작기 때문에 숫자 크기대로 정렬되지 않음!!

 

- 오름차순

const arr = [23, 15, 2, 9, 1, 3];

arr.sort((a, b) => a - b);
// [1, 2, 3, 9, 15, 23]

sort()에 두 개의 숫자를 비교하는 함수를 구현해 인자로 전달해야 함.

a - b 의 값을 리턴하도록 하면 오름차순이 됨

a 가 크면 양수, b가 크면 음수, 같으면0 이 리턴되기 때문에 간단히 구현가능

 

- 내림차순

const arr = [23, 15, 2, 9, 1, 3];

arr.sort((a, b) => b - a);
// [23, 15, 9, 3, 2, 1]

내림차순은 비교 함수에서 b - a 의 값을 리턴하면 됨

 

2. 문자열 배열 정렬

- 오름차순

문자열 배열의 경우 sort() 호출 시, 알파벳 순서대로 정렬됨

const arr = ['banana', 'b', 'boy'];
arr.sort();
console.log(arr); //['b', 'banana', 'boy']

 

- 내림차순

1. sort()에서 문자열을 내림차순으로 정렬하는 비교 함수 만들고 인자로 전달

2. 비교하는 두 개의 문자열 크기가 같으면 0 / 크면 양수 / 작으면 음수 리턴하도록 구현

const arr = ['banana', 'b', 'boy'];

arr.sort((a, b) => {
	if(a > b) return -1; 
	else if (b > a) return 1;
	else return 0;
});
console.log(arr);
//['boy', 'banana', 'b']

문자열을 내림차순 정리하기 위해서는 sort()의 파라미터 함수에서 두 문자열을 비교하는 내용이 들어가야 함

문자열을 비교하는 방법은 후에 글 게시!

 

만약 함수로 구현하기 힘들다면 sort()로 오름차순 정렬 후 reverse()를 호출해 배열 순서 변경하면 동일한 결과 구현 가능함

const arr = ['boy', 'b', 'banana'];

arr.sort().reverse();  // ['boy', 'banana', 'b']

 

- 대소문자 구분없이 정렬

const arr = ['banana', 'b', 'Boy'];

arr.sort(); // ['Boy', 'b', 'banana']

대문자가 소문자보다 앞에 오도록 정렬됨 (유니코드에서 대문자가 소문자보다 앞에 있기 때문)

따라서 대소문자 구분없이 정렬하기 위해 다음 방법을 사용함

 

(1) 대소문자 구분없이 오름차순 정렬하기

const arr = ['banana', 'b', 'Boy'];

arr.sort(function(a, b){
	const A = a.toUpperCase();
    const B = b.toUpperCase();
    
    if(A > B) return 1;
    if(A < B) return -1;
    if(A === b) return 0;
});

//['b', 'banana', 'Boy']

문자열을 모두 대문자로 변환해 비교 (toUpperCase() 함수)

 

(1) 대소문자 구분없이 내림차순 정렬하기

const arr = ['banana', 'b', 'Boy'];

arr.sort(function(a, b){
    const A = a.toUpperCase();
    const B = b.toUpperCase();
    
    if(A < B) return 1;
    if(A > B) return -1;
    if(A === b) return 0;
});

//['Boy', 'banana', 'b']

문자열을 모두 대문자로 변환해 비교 (toUpperCase() 함수) 오름차순과 부등호를 반대로 비교해주면 됨

 

 

3. 객체 정렬하기

객체에서 비교할 요소를 선택해 크기 비교

const arr = [
    {id: 1000, name: 'banana'},
    {id: 500, name: 'apple'},
    {id: 2000, name: 'orange'}
];

arr.sort((a, b) => a.id - b.id);

/*
[
    {id: 500, name: 'apple'},
    {id: 1000, name: 'banana'},
    {id: 2000, name: 'orange'}
]
*/

위의 예제는 오름차순으로 정렬되고, 내림차순으로 정렬할 땐 b.id - a.id 로 해주면 됨

 

 

 

[출처]

https://codechacha.com/ko/javascript-sorting-arr/#2-%EC%88%AB%EC%9E%90-%EB%B0%B0%EC%97%B4-%EC%A0%95%EB%A0%AC

JavaScript - 배열 정렬 방법 (오름차순, 내림차순)

https://hianna.tistory.com/409

[Javascript] 배열 정렬하기 (오름차순, 내림차순, 문자열, 객체)