IT/개발지식

[자바스크립트] sort() 함수 활용하여 간단히 정렬하기

김솔샤르 2018. 8. 18. 14:39

 

 

 

자바스크립트의 array 객체는 sort 함수를 내장하고 있다. 기본적이고 폭넓게 활용되므로 활용법을 알아두도록 하자.

 

Array.prototype.sort(compareFunction(a, b))

 

인자로 받는 함수는 직접적으로 정렬 순서를 결정하는데 사용되는 함수이다. 이를 생략하면 유니코드 순으로 정렬된다. compare function을 넣어준다면, 다음과 같은 원리로 정렬 순서가 결정된다.

 

  • compareFunction(a, b)이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬한다. 즉, a가 먼저온다.
  • compareFunction(a, b)이 0을 반환하면 a와 b의 순서를 변경하지 않는다.
  • compareFunction(a, b)이 0보다 큰 경우, b를 a보다 낮은 색인으로 정렬한다. 즉, b가 먼저온다.

 

 숫자 정렬
 
예시로 숫자 배열을 정렬해보자.
 
var numbers = [3, 17, 5, 2, 11, 4]; 

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

console.log(numbers);// 1, 2, 3, 4, 10, 11

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

console.log(numbers);// 11, 10, 4, 3, 2, 1
 

 

3라인에서는 오름차순 정렬을 한다. return값이 0보다 작을 경우 a, b순으로 요소를 정렬하기 때문이다. 7라인은 이와 반대로 내림차순 정렬을 한다.

 

 

 문자 정렬

 

문자는 더 간단하다. compareFunction 인자를 안넣어주면 되기 때문이다. 그러면 sort 함수는 유니코드 순으로 문자를 정렬한다.

 

var fruit = ['cherries', 'apples', 'bananas'];
fruit.sort(); // ['apples', 'bananas', 'cherries']
 

 

여기서 주의할점이 있는데, 숫자를 정렬할때 compareFunction을 넣어주지 않으면 유니코드순으로 정렬이 되기 때문에 의도와는 다른 순서로 정렬된다.

 

var numbers = [3, 17, 5, 2, 11, 4]; 
numbers.sort(); // 11,17,2,3,4,5

 

이렇게 크기가 아닌 사전순 배열이 되어버린다. 주의하도록 하자.

 

 

 객체 정렬

 

객체의 경우에도 특정 프로퍼티를 기준으로 정렬할 수 있다.

var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic' },
  { name: 'Zeros', value: 37 }
];

// value 기준으로 정렬
items.sort(function (a, b) {
  if (a.value > b.value) {
    return 1;
  }
  if (a.value < b.value) {
    return -1;
  }
  // a와 b의 value가 같은 경우
  return 0;
});

// name 기준으로 정렬
items.sort(function(a, b) {
  var nameA = a.name.toUpperCase(); // 대문자 기준
  var nameB = b.name.toUpperCase(); // 대문자 기준
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // 이름이 같을 경우
  return 0;
});
​

 

 

 

- 끝 -



참고

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
https://en.wikipedia.org/wiki/Sorting_algorithm#Stability

 

 

반응형