JavaScript 배열 숫자 오름차순 내림차순 정렬

전에 React.js로 개발한 가상화폐 시세 테이블을 개발하면서 테이블 정렬이 왜 제대로 작동하지 않았는지 오늘 자바스크립트 배열을 건들여볼 일이 생겨서 알게되었습니다.

 

그때 발생하였던 문제는 아래와 같았습니다.

let array = [30, 2, 20, 1, 1111];

let result = array.sort();
console.log(result) // [1, 1111, 2, 20, 30]

제대로 사용하였다면 1, 2, 20, 30, 1111 이 출력되어야하는데 결과는 그렇지 못합니다. 이는 비교함수를 전달하지 않았을때는 숫자 데이터는 문자열로 변환된 후 Unicode 기준으로 정렬되기 때문입니다.

 

이를 제대로 정렬하기 위해서는 비교함수를 전달하여 숫자의 크기에 따라 정렬이 가능합니다.

 

오름차순 정렬

let array = [30, 2, 20, 1, 1111];

let result = array.sort((a,b) => a - b);
console.log(result) // [1, 2, 20, 30, 1111]

매개 변수 a와 b를 전달한뒤 배열내의 임의의 요소 a, b를 비교할때 반환되는 값이 0보다 크면 a가 b보다 앞에 오고 0보다 작으면 b가 a보다 앞으로 오게됩니다. 그리고 반환되는 값이 0이면 순위 변경을 하지 않습니다.

 

내림차순 정렬

let array = [30, 2, 20, 1, 1111];

let result = array.sort((a,b) => b - a);
console.log(result) // [1, 2, 20, 30, 1111]

a, b 자리만 바꾸어주시면 됩니다.