JavaScript | sort()

오늘은 array의 내장 함수 중 sort()에 대해 간략히 정리해본다.

sort() 메소드는 배열의 요소를 적절하게 정렬한 후 리턴한다. 원 배열이 바뀐다는 것을 유의하자. 기본 정렬 순서는 문자열의 유니코드 기준을 따른다.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

위의 결과로 보아 숫자의 경우 오름차순이 아니라 1, 100000, 21, 30, 4 순으로 문자열로 취급되어 사전편집처럼 재정렬된 것을 알 수 있다.

기본 정렬 대신 새로운 정렬 기준을 만드려면 arr.sort()에 새로운 함수를 넣어주어야 한다. 인수로 넘겨주는 함수는 반드시 값 두 개를 비교해야 하고 반환 값도 있어야 한다.

다음은 숫자 정렬 방식

const nums = [1, 23, 11, 56, 7]

//사전식 정렬
nums.sort(); // 1, 11, 23, 56, 7

// 오름차순 정렬
nums.sort(function(a, b) {
	return a - b;
} // 1, 7, 11, 23, 56

// 내림차순 정렬
nums.sort(function(a, b) { 
	return b - a;
} // 56, 23, 11, 7, 1

sort() 안에 함수를 넣어주는 것으로 숫자를 올바르게 정렬할 수 있다.

다음은 object 정렬 방식

let fruits = [
    { name: 'apple', price: 12 },
    { name: 'melon', price: 42 },
    { name: 'kiwi', price: 1 },
    { name: 'pear', price: 11 },
    { name: 'oranage', prcie: 55}
]

// 이름 오름차순 정렬
fruits.sort(function(a, b) {
    return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
}); // apple kiwi melon orange pear

// 이름 내림차순 정렬
fruits.sort(function(a, b) {
    return a.name > b.name ? -1 : a.name < b.name ? 1 : 0;
}); // pear orange melon kiwi apple

// 가격 오름차순 정렬
let sortPrice = 'price';

fruits.sort(function(a, b) {
    return a[sortPrice] - b[sortPrice];
});

참고

http://dudmy.net/javascript/2015/11/16/javascript-sort/

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort