Object Array를 key에 의해 정렬하기
개요
개발하고 있는 Application에서 Object의 Array를 Key에 의해 정렬할 일이 생겼다.
Array에 int나 string이 담겨 있을 때는, 그냥 sort() 메소드를 사용하면 되지만, Object가 들어있을 때는 조금 까다롭다.
Array.sort() 함수
요즈음, Javascript에 대한 메소드를 검색하다보면, MDN(Mozilla Developer Network)에 있는 문서를 주로 보게 된다. 가장 깔끔한 형식이고, 예제도 무척이나 쉽다!
sort() 메소드는 누구나 알고 있겠지만 배열의 요소를 정렬하고 배열을 반환한다.
(String의 정렬 순서는 유니코드 순서에 따른다. 주의할 점은 유니코드에서 숫자는 대문자 앞에 온다는 점이다.)
Array.sort() 함수의 파라미터
재미있는 점은 sort 함수의 파라미터는 2가지가 있다.
- arr.sort()
- arr.sort(compareFunction(a,b)) //인자 2개를 받는 함수.
그동안 파라미터가 없이는 자주 사용했지만, 파라미터에 무언가를 담지는 않았다.
파라미터를 담아서는 어떻게 사용할까?
compareFunction은 인자 2개를 받아서 사용한다.
예를들자면, 다음과 같이 사용한다.
let unSortedObjArr = [{
c: 100,
},{
c: 50
},{
c: 10
}];
unSortedObjArr.sort((a, b) => {}); // 이 부분!재미있는 점은, compareFunction의 반환 값에 따라 요소를 정렬한다는 점이다.
- 반환 값이 0보다 작으면 a를 b보다 먼저 정렬한다. (a가 b 앞에 온다는 말이다.)
- 반환 값이 0이면 a와 b를 변경하지 않고 나머지 요소에 대하여 정렬한다 (정렬 x)
- 반환 값이 0보다 크면 b를 a보다 먼저 정렬한다. (b가 a 앞에 온다는 말이다.)
자 이제 본래 의도였던, Object Array를 Value에 의해 정렬해보자.
let items = [
{ name: 'Edward', value: 21 },
{ name: 'Sharpe', value: 37 },
{ name: 'And', value: 45 },
{ name: 'The', value: -12 },
{ name: 'Magnetic' },
{ name: 'Zeros', value: 37 }
];
// sort by value
items.sort(function (a, b) {
if(a.hasOwnProperty('value')){
return a.value - b.value;
}
});
console.log(items)
/* [ { name: 'The', value: -12 },
{ name: 'Edward', value: 21 },
{ name: 'Sharpe', value: 37 },
{ name: 'And', value: 45 },
{ name: 'Magnetic' },
{ name: 'Zeros', value: 37 } ] */추가로 Object Array를 Key에 의해 정렬해보자.
let items = [
{ name: 'Edward', value: 21 },
{ name: 'Sharpe', value: 37 },
{ name: 'And', value: 45 },
{ name: 'The', value: -12 },
{ name: 'Magnetic' },
{ name: 'Zeros', value: 37 }
];
// sort by name(key)
items.sort(function(a, b) {
var nameA = a.name.toUpperCase(); // ignore upper and lowercase
var nameB = b.name.toUpperCase(); // ignore upper and lowercase
return nameA - nameB;
});
console.log(items);
/* [ { name: 'Edward', value: 21 },
{ name: 'Sharpe', value: 37 },
{ name: 'And', value: 45 },
{ name: 'The', value: -12 },
{ name: 'Magnetic' },
{ name: 'Zeros', value: 37 } ] */Array.sort() 함수의 알고리즘 및 내부
원하던 Object의 배열은 끝이 났지만, 한 번 더 깊이 들어가 보자.
sort()함수는 어떤 정렬을 사용할까? Bubble sort? Merge sort? Select sort?
어떤 정렬인지 한번 내부를 보자.예제를 써보고, 안 되면 구글링을 해보자
let unSortedObjArr = [{
c: 4,
},{
c: 3
},{
c: 2
},{
c: 1
}];
let sortedObjArr = unSortedObjArr.sort((a, b) => {
console.log(a.c);
console.log(b.c);
console.log('=========');
return a.c - b.c;
});
console.log(sortedObjArr);
/*
4
3
=========
4
2
=========
3
2
=========
4
1
=========
3
1
=========
2
1
=========
*/무언가 이상하다고 생각하지 않는가? 그냥 봐서는 어떤 정렬인지 모르겠다.
Google에 검색해 보았다. (검색어: javascript sort function algorithm) algorithm - Javascript Array.sort implementation? - Stack Overflow
요약해 보자면,
스택 오버플로는 선택된(첫 번째) 답글이 진리이지만, 답글보다 많이 vote를 받은 comment에 보면 이 답변은 선택되지 말았어야 했다고 적혀있다. 다음 답글을 보니 첫 번째 답글보다 up vote가 많다. 뭔가 읽을 만 한가보다 짧게 요약하자면 크롬이나 사파리에서 쓰는 웹킷에서는
- Number type에서는 quicksort를 사용
- String에서 가능하면 quicksort를, 불가능하면 mergesort를 사용
- 다른 타입의 배열에서는 selection sort를 사용 여담으로 string은 radix sort로 O(n)이 되는게 아닌가 싶지만, 이 알고리즘은 runtime 에서 더 복잡도가 높아진다고 한다. 그래서 ‘quick소트를 사용한 것이구나’를 알 수 있다.
포스팅을 간단히 쓰려고 했는데 무척이나 길어지게 되었다. 깊게 쓰려니 끝이 없는 것 같다!
