javascript sort 정리

코딩하면서 정렬하기 위해 자바스크립트의 .sort 함수를 자주 사용합니다.

처음에는 무작정 sort 하면 그냥 정렬 되는줄 알았는데 사용하다가 몰랐던 내용을 정리하기 위해서 

글을 작성하게 되었습니다. 

 

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

Mozilla 사이트

 

 

Array.prototype.sort()

 

 

기본적은 사용방법은 아래와 같다.

var array1 = [5, 4, 3, 2, 1];
var array2 = ["drive", "car", "banana", "apple"];
var array3 = ["디귿", "니은", "기역"];

array1.sort();
array2.sort();
array3.sort();


console.log(array1); // 1,2,3,4,5
console.log(array2); // apple, banana, car, drive
console.log(array3); // 기역, 니은, 디귿

 

아무것도 설정하지 않고 sort()를 호출했을 때 (compareFunction 미설정)

배열의 각 요소를 유니코드로 변환하여 포인트 순서대로 문자열을 오름차순으로 정렬한다. 

 

즉, 아래와 같은 상황에서는 결과 값이 예상과 다르게 나올 수 있음을 유의해야 한다. 

var array = [1, 2, 3, 4, 5, 10, 20, 30, 40, 100];

var temp = array.sort();

console.log(temp); // 1, 10, 100, 2, 20, 3, 30, 4, 5

 

위의 경우와 같이 각각의 요소를 유니코드로 변환해서 포인트 순서대로 정렬하므로 compare함수를 설정하여 오름차순을 정의 할 수 있다. 

 

 

 

compare 함수

 

sort() 함수 내부에 정의하는 함수로 비교되는 두 요소 a,b 가 주어질 때 return 값에 따라서 함수의 정렬이 정해진다. 

 

return 값이 양수인 경우 : b를 a 보다 앞으로 정렬합니다. 

return 값이 0 인 경우    : 아무것도 정렬하지 않습니다. 

return 값이 음수인 경우 : a를 b 보다 앞으로 정렬합니다. 

 

사용 방법은 아래와 같습니다. 

var array = [1, 3, 5, 7, 100, 30, 50]

// 오름차순
// 앞에 있는 요소가 뒤에 있는 요소 보다 작은 순서로 정렬
// return 값이 양수 인 경우 b 를 a 보다 앞으로 정렬한다. 
//
// lambda 
// array.sort((a, b) => { return a - b })
array.sort(function(a, b) {
	return a - b;
});

// 1, 3, 5, 7, 30, 50, 100



// 내림차순
// 앞에 있는 요소가 뒤에 있는 요소보다 큰 순서대로 정렬
// return 값이 음수인 경우 a 를 b 보다 앞으로 정렬한다.
//
// lambda 
// array.sort((a, b) => { return b - a })
array.sort(function(a, b) {
	return b - a
});
// 100, 50, 30, 7, 5, 3, 1


// return 0
// 아무것도 정렬하지 않는다. 

 

문자열 같은 경우 오름차순으로 정렬시 문자열 순서대로 정렬하게 됩니다. 

하지만 내림차순으로 정렬 할 경우 compare함수로 정의해야 하는데 

숫자와는 조금 다릅니다. 

 

var array = ["f", "e", "a", "b", "c", "d", "apple", "banana"];

var temp1 = array.sort();
console.log(temp1); 
// "a", "apple", "b", "banana", "c", "d", "e", "f" 

// 숫자에서 사용되는 오름차순 
// 결과는 원하는 데로 나오지 않는다. 
var temp2 = array.sort((a, b) => { return a - b });  
// "f", "e", "a", "b", "c", "d", "apple", "banana"


// 숫자에서 사용되는 내림차순
var temp3 = array.sort((a, b) => { return b - a});
// "f", "e", "a", "b", "c", "d", "apple", "banana"


// 각각의 배열 요소를 비교하여 return 값을 직접 설정해 주어야 한다. 

// 문자배열 오름차순 
var temp4 = array.sort((a, b) => {
	return a < b ? -1 : (a > b ? 1 : 0) 
})
// "a", "apple", "b", "banana", "c", "d", "e", "f"

// 문자배열 내림차순
var temp5 = array.sort((a, b) => {
	return a > b ? -1 : (a < b ? 1 : 0) 
})
// "f", "e", "d", "c", "banana", "b", "apple", "a"

각각의 요소의 문자열을 비교하여 순서를 정하여 return 한다. 

 

 

 

 

 

응용 - 객체

 

javascript의 json을 보면 배열 객체배열을 많이 사용한다. 

객체 배열을 정렬하는 방법에 대해서 알아보자. 

위에서 적용한 방법을 생각하면 쉽게 정리 가능하다. 

 

var array = [
	{ name : "자바", num : 5},
	{ name : "자바스크립트", num : 4},
	{ name : "C", num : 1},
	{ name : "파이썬", num : 2},
	{ name : "C++", num : 3},
	{ name : "nodejs", num : 6},
];

// name 오름차순
array.sort((a, b) => {
	return a.name < b.name ? -1 : a.name > b.name ? 1 : 0 ;
});
// [{ name: "C", num: 1 }, { name: "C++", num: 3 }, { name: "nodejs", num: 6 }, { name: "자바", num: 5 }, { name: "자바스크립트", num: 4 }, { name: "파이썬", num: 2 }]

// name 내림차순
array.sort((a, b) => {
	return a.name > b.name ? -1 : a.name < b.name ? 1 : 0 ;
});
// [{ name: "파이썬", num: 2 }, { name: "자바스크립트", num: 4 }, { name: "자바", num: 5 }, { name: "nodejs", num: 6 }, { name: "C++", num: 3 }, { name: "C", num: 1 }]


// num 오름차순
array.sort((a, b) => {
	return a.num - b.num
});

// num 내림차순
array.sort((a, b) => {
	return b.num - a.num
});

 

 

 

문자열을 정리하면 영어가 한국어보다 우선적으로 정렬 되는 것을 알수있다. 

끄읕.