[VanillaJS] 객체 정렬 어떻게 하지? (feat. 문자열)

배열을 정렬할 때는, 

Array.sort() 함수를 통해서 정렬을 할 수 있다. 

 

객체를 정렬할 때는 어떻게 해야할까?

객체도 마찬가지로 sort()를 이용하는데, 내부에 compareFunction을 정의해주어야 한다. 

 

예를들어, age필드를 가진 아래 객체 배열은 다음과 같이 정렬할 수 있다. 

let objs = [ {age: 13}, {age: 43}, {age: 9}, {age: 40} ];

objs.sort(function(a,b) { // 오름차순
	return a.age - b.age;
}); 

objs.sort(function(a,b) { // 내림차순
	return b.age - a.age;
});

 

C++과 같은 다른 언어에서는, compareFunction을 정의할 때, boolean형식으로 return하는 경우가 많은데, JS에서는 int로 return해서 신기했다. 

 

아래는 공식 문서의 관련 내용이다.

compareFunction이 제공되면 배열 요소는 compare 함수의 반환 값에 따라 정렬됩니다. a와 b가 비교되는 두 요소라면,

• compareFunction(a, b) < 0 : a를 b보다 낮은 색인으로 정렬합니다. (a가 먼저 옴)
• compareFunction(a, b) == 0을 반환하면 a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬합니다. 
• compareFunction(a, b) > 0 : b를 a보다 낮은 인덱스로 정렬합니다. (b가 먼저 옴)

 

그런데, 객체를 정렬할 때 기준이 되는 필드가 string이면 어떻게 해야할까?

 

string에서도 -연산을 지원해주지 않을까? 해서 아래처럼 시도했는데, compareFunction의 return값이 NaN(Non a Number)로 나오면서 정렬이 되지 않았다. 

let objs = [ {age: "13"}, {age: "43"}, {age: "9"}, {age: "40"} ];

objs.sort(function(a,b) { // 정렬 x
	return a.age - b.age;
});

 

검색 결과, string에서 크기비교 연산은 가능하기 때문에, 아래와 같이 코딩하면 된다. 값이 같은 경우를 0을 return하는 것으로 따로 빼줘도 되고, 안 해줘도 상관 없다. 

let objs = [ {age: "13"}, {age: "43"}, {age: "9"}, {age: "40"} ];

objs.sort(function(a,b) { // 오름차순
    if (a.age > b.age) return 1;
    else if (a.age < b.age) return -1;
    else return 0;
});

objs.sort(function(a,b) { // 오름차순
    if (a.age > b.age) return 1;
    else (a.age < b.age) return -1;
});

 

참고로, string 배열 정렬 방법은 다음과 같다. 

let arr = [ "12", "13", "20" ];

arr.sort() // 오름차순
arr.reverse() // 내림차순