자바스크립트에는 추가로 설치할 필요 없이 내장 함수로 정렬을 할 수 있다.
바로 내장 함수 sort()이다.
Javascript sort ----> arrayobj.sort(sortFunction)
arrayobj이란 array object의 줄임말으로, 정렬할 배열이다.
sortFunction은 어떤 방식으로 정렬할 지에 대한 함수이다.
처음엔, python의 sort와 비슷하게 생각하여 다음과 같이 자바스크립트를 프로그래밍하였다.
var x = [20,10,3,5,13];
x.sort();
console.log(x);다음을 실행시키고 x를 console.log로 찍어보면 어떤 값이 나올까
우리는 모두 x가 [3, 5, 10, 13, 20]이 나올 것이라고 생각한다.
왜나면, 지금까지 sort는 특정한 설정을 하지 않는다면 오름차순으로 정렬해주기 때문이다.
그렇다면 배열 x가 오름차순으로 정렬이 되었는지 한번 값을 찍어보자
예상과 전혀 다른 값이 나왔다. [10, 13, 20, 3, 5];
이것은 오름차순도 아니고 그렇다고 내림차순도 아니다.
머리가 좋은 사람은 이미 눈치 챘을 텐데, sort() 함수로 문자열 정렬이 된것이다.
자바스크립트의 정렬 default값은 문자정렬이다.
"10"이 "3"보다 앞에 있기 때문에, 다음과 같이 문자 오름차순 정렬이 된것이다.
그렇다면 숫자정렬을 어떻게 해야할까? 숫자 정렬을 하려면 다음과 같이 sortFunction을 수정해주어야 한다.
arrayobj.sort(function(a, b) {
return a - b;
});다음 코드로 위의 소스를 다시 실행시켜 숫자 정렬이 되는지 살펴보자.
놀랍게도 정렬이 정상적으로 된다. 그렇다면 내림차순은 어떻게 구현해야 할까?
내림차순은 a와 b의 위치를 반대로 해주면 된다. 즉 다음 소스를 이용하면 될 것이다.
arrayobj.sort(function(a, b) {
return b - a;
});그렇다면 object의 경우 어떻게 구현해야 할까? 만약 다음과 같은 과일에 대한 이름과 가격집합이 있다고 가정하자.
var fruit = [
{ name : "banana", price : 4000},
{ name : "watermelon", price : 10000},
{ name : "apple", price : 3000},
]우리는 때로는 이름순으로 정렬하고 싶을 것이고, 때로는 가격순으로 정렬하고 싶을 것이다.
다음과 같은 소스를 통해 이름과 가격에 대한 오름차순과 내림차순 정렬을 할 수 있다.
fruit.sort(function(a, b) { //이름 오름차순
if(a.name<b.name)
return -1;
else if(a.name>b.name)
return 1;
else
return 0;
});
fruit.sort(function(a, b) { //이름 내림차순
if(a.name>b.name)
return -1;
else if(a.name<b.name)
return 1;
else
return 0;
});
fruit.sort(function(a, b) { //가격 오름차순
return a["price"] - b["price"];
});
fruit.sort(function(a, b) { //가격 내림차순
return b["price"] - a["price"];
});이름 내림차순만 예제로 한번 해보겠다.
다음과 같이 정렬이 잘 된 것을 확인할 수 있다.