[JS] 배열 정렬 - sort()

김하영·2022년 12월 18일
0

Javascipt

목록 보기
7/11
post-thumbnail

Array.prototype.sort()

sort() 메서드는 배열을 정렬한 후 그 배열을 반환하는 함수입니다.

Array 객체의 sort() 메서드 구문입니다. compareFunction은 옵션입니다.

array.sort([compareFunction])

sort() 메서드는 기본적으로 배열 안의 요소들을 오름차순(Ascending Order, ASC)으로 정렬합니다.

const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
months.sort();

console.log(months);
--> ['April', 'August', 'December', 'February', 'January', 'July', 'June', 'March', 'May', 'November', 'October', 'September']

배열 안의 요소가 숫자라도 숫자형 오름차순이 아니라 문자형 오름차순으로 정렬됩니다. 1이 우선입니다.

const number = [1, 5, 10, 15, 20, 25, 100];
number.sort();

console.log(number);
--> [1, 10, 100, 15, 20, 25, 5]

기본적으로 배열은 문자형 오름차순(Ascending Order, ASC)으로 정렬됩니다.

그래서 숫자형으로 정렬하기 위해 sort() 메서드의 옵션이 compareFunction을 사용해야 합니다.

compareFunction은 두 개의 비교 객체(comp1, comp2)를 비교하여 두 객체의 크고 작음을 리턴하여 정렬시킵니다.

compareFunction(comp1, comp2)에서
리턴 값이 -1(0보다 작은 수)이면 comp1을 comp2보다 낮은 요소로 정렬됩니다.
리턴 값이 0이면 동일하게 정렬됩니다.
리턴 값이 1(0보다 큰 수)이면 comp1을 comp2보다 큰 요소로 정렬됩니다.


숫자 배열 정렬

const number = [1, 5, 10, 15, 20, 25, 100];

// 오름차순 정렬(Ascending Order, ASC)
number.sort(function(comp1, comp2) {
	return comp1 - comp2; 
});

console.log(number);
--> [1, 5, 10, 15, 20, 25, 100]

// 내림차순 정렬(Descending Order, DESC)
number.sort(function(comp1, comp2) {
	return comp2 - comp1; 
});

console.log(number);
--> [100, 25, 20, 15, 10, 5, 1]

문자열 배열 정렬

const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

// 오름차순 정렬(Ascending Order, ASC)
months.sort(function(comp1, comp2) {
	// 대/소문자 구분 없이
	var comp1UC = comp1.toUpperCase();
	var comp2UC = comp2.toUpperCase();
	if (comp1UC < comp2UC) {
		return -1;
	} else if (comp1UC > comp2UC) {
		return 1;
	}
	return 0;
});

console.log(months);
--> ['April', 'August', 'December', 'February', 'January', 'July', 'June', 'March', 'May', 'November', 'October', 'September']

// 내림차순 정렬(Descending Order, DESC)
months.sort(function(comp1, comp2) {
	// 대/소문자 구분 없이
	var comp1UC = comp1.toUpperCase();
	var comp2UC = comp2.toUpperCase();
	if (comp1UC < comp2UC) {
		return 1;
	} else if (comp1UC > comp2UC) {
		return -1;
	}
	return 0;
});

console.log(months);
--> ['September', 'October', 'November', 'May', 'March', 'June', 'July', 'January', 'February', 'December', 'August', 'April']

** 문자열 배열의 요소를 대/소문자로 정렬하시려면 compareFunction 함수에서 toUpperCase() 메서드를 사용하지 않으면 됩니다.


객체 배열 정렬

객체 배열을 오름차순이나 내림차순으로 정렬하기 위해서도 compareFunction을 사용해야 합니다.

const list = [
	{id: 1, name: 'hayeong'},
    {id: 2, name: 'onew'},
    {id: 3, name: 'kirahaa'}
]

// 이름(name)을 기준으로 오름차순 정렬(ASC)
list.sort(function(a, b) {
	if (a.name.toUpperCase() < b.name.toUpperCase()) {
    	return -1;
    } else if (b.name.toUpperCase() > a.name.toUpperCase()) {
    	return 1;
    } 
    return 0;
})

console.log(list);
[
	{id: 1, name: 'hayeong'},
    {id: 3, name: 'kirahaa'},
    {id: 2, name: 'onew'}
]

// 이름(name)을 기준으로 내림차순 정렬(DESC)
list.sort(function(a, b) {
	if (a.name.toUpperCase() < b.name.toUpperCase()) {
    	return 1;
    } else if (b.name.toUpperCase() > a.name.toUpperCase()) {
    	return -1;
    } 
    return 0;
})

console.log(list);
[
	{id: 2, name: 'onew'},
    {id: 3, name: 'kirahaa'},
	{id: 1, name: 'hayeong'}
]
profile
호기심 많은 프론트엔드 주니어 💡

0개의 댓글