[JavaScript] 배열 정렬하기 (Array.sort) - 객체배열 정렬, 숫자정렬

dhkim 12월 20, 2022

 


JavaScript의 Array 클래스 sort 메소드는 기본적으로 '문자형 오름차순'을 따릅니다.

이번 포스팅에서는 sort 메소드의 숫자형 정렬 방법과 객체배열 내 특정 속성으로의 정렬에 대해 다룹니다.


1. 문자형 오름차순

 기본적인 '문자형 오름차순'에 대한 예제입니다.

map으로 배열을 순회하며 'Number' 타입 캐스팅을 한 후에도, 동일한 것을 확인할 수 있습니다.

[예제코드]

1
2
3
4
const NumberList = ['3', '15', '8', '7', '10'];         // 문자열 타입 숫자 배열

console.log(NumberList.sort());                         // 숫자형도 기본 '문자형 오름차순'으로 정렬함.
console.log(NumberList.map(dt=> Number(dt)).sort());    // 숫자형도 기본 '문자형 오름차순'으로 정렬함. (타입캐스팅)

[결과]




2. 숫자형 정렬

  sort 메소드 내의 함수형 매개변수 compareFunction(a,b) (MDN 약칭) 는 아래와 같은 의미를 갖는다.

[매개변수]

  • 인자(a) : 배열 내 다음 차례의 원소
  • 인자(b) : 배열 내 현재 순서의 원소

[반환값]

  1. 0보다 큰 수       : 배열의 인자(b)를 선 순위에 배치한다. (빠른 인덱스)
  2. 0                    : 위치를 바꾸지 않는다.
  3. 0보다 작은 수    : 배열의 인자(b)를 후 순위에 배치한다. (늦은 인덱스)


[예제 : 숫자형 오름차순 정렬]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const NumberList = ['3', '15', '8', '7', '10'];         // 문자열 타입 숫자 배열

NumberList.sort((a,b)=>{

	if(Number(a) < Number(b)){
		return -1;
	}
	else{
		return 1;
	}
});


[결과]




3. 객체배열 정렬

 다음 예제는 순서(no), 상품(product), 판매자(seller)로 구성된 객체를 배열원소로 갖는 배열을 정렬하는 내용이다. 

우선순위를 순서(no) > 판매자(seller) 순서로 내림차순으로 정렬한다.

같은 순서(no)를 갖는 '1' 항목은 판매자명으로 정렬된 것을 확인한다.


[예제코드]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
const SalesList = [
	{
		no: '1',
		product: 'Apple',
		seller: 'Lee'
	},
	{
		no: '2',
		product: 'Banana',
		seller: 'Lee'
	},
	{
		no: '1',
		product: 'Apple',
		seller: 'Kim'
	},
	{
		no: '3',
		product: 'Melon',
		seller: 'Hong'
	}
];


SalesList.sort((a,b)=>{

	let nextObj = a;
	let currObj = b;


	// 현재원소의 값이 다음원소 값보다 작을 때, 양수(1) 값 반환 : 내림차순(DESC)
	if(nextObj.no < currObj.no){
		return 1;
	}
	else{
		// 'no'값이 같은 경우 'seller' 값으로 정렬
		if(nextObj.no == currObj.no){

			if(nextObj.seller.toUpperCase() < currObj.seller.toUpperCase()){
				return 1;
			}
			else{
				return -1;
			}
		}
		else{
			return -1;
		}
	}
});


[결과]


0 댓글