首页 > itarticle > 정렬 함수 sort() 사용법 1. 정렬할 원소가 문자열일 경우 2. 정렬할 원소가 숫자일 경우 3. 정렬할 원소가 객체일 경우

정렬 함수 sort() 사용법 1. 정렬할 원소가 문자열일 경우 2. 정렬할 원소가 숫자일 경우 3. 정렬할 원소가 객체일 경우

admin 11月 13, 2020 0

배열안에 원소를 정렬하는 함수로, 원본 배열을 직접 변경하며 정렬된 배열을 반환한다.

sort(compareFunction) 함수는 sort() 안에 인자로 정렬 순서를 정의하는 함수를 넣어서 정렬을 한다. 만약, 생략하게 되면, 기본 문자열에 순서에 따라 정렬이 된다. 즉, ASCII 문자 순서(오름차순)로 정렬된다. 또한, sort() 함수는 정렬하는 원소가 문자열, 숫자, 또는 객체형이냐에 따라 사용법이 조금씩 다르다.

sort() 안에 인자인 compareFunction를 지정하면, 값은 아래 중 하나로 반환된다.

첫번째 인수가 두번째 인수보다 작을 경우 -> ‘-‘
첫번째 인수가 두번째 인수보다 클 경우 -> ‘+’
두 인수가 같을 경우 -> 0

1. 정렬할 원소가 문자열일 경우

// 오름차순
const arr = ['orange', 'apple', 'banana'];

console.log(arr.sort()); // [ 'apple', 'banana', 'orange' ]

// 내림차순(ES6) - 문자열끼리 비교할 때는 비교연산자를 사용한다.(숫자는 뺄셈연산자 사용)
console.log(arr.sort((a, b) => {
  if(a > b) return -1;
  else if(b> a) return 1;
  else return 0;
})); // [ 'orange', 'banana', 'apple' ]

// 내림차순(ES5) - 문자열끼리 비교할 때는 비교연산자를 사용한다.(숫자는 뺄셈연산자 사용)
console.log(arr.sort(function(a, b) {
  if(a > b) return -1;
  else if(b> a) return 1;
  else return 0;
})); // [ 'orange', 'banana', 'apple' ]

2. 정렬할 원소가 숫자일 경우

const arr = [3, 11, 12, 10, 9, 1];

// ASCII 문자 순서로 정렬되어 숫자의 크기대로 나오지 않음 -> sort()안에 인자로 함수를 추가해줘야 함
console.log(arr.sort()); // [ 1, 10, 11, 12, 3, 9 ]

// 오름차순(ES6)
console.log(arr.sort((a, b) => { // [ 1, 3, 9, 10, 11, 12 ]
  return a - b;
}));

// 오름차순(ES5)
console.log(arr.sort(function(a, b) { // [ 1, 3, 9, 10, 11, 12 ]
    return a - b;
}));

// 내림차순(ES6)
console.log(arr.sort((a, b) => { // [ 12, 11, 10, 9, 3, 1 ]
  return b - a;
}));

// 내림차순(ES5)
console.log(arr.sort(function(a, b) { // [ 12, 11, 10, 9, 3, 1 ]
    return b - a;
}));

3. 정렬할 원소가 객체일 경우

const person = [
  { name : "john", age : 25},
  { name : "smith", age : 15},
  { name : "ro", age : 35},
  { name : "park", age : 45}
]

/* 이름순으로 정렬 */
// 문자열끼리 비교할 때는 비교연산자를 사용한다.

// 오름차순(ES6)
console.log(person.sort((a, b) => {
  return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
})); // [ { name: 'john', age: 25 }, { name: 'park', age: 45 }, { name: 'ro', age: 35 }, { name: 'smith', age: 15 } ]

// 오름차순(ES5)
console.log(person.sort(function(a, b) {
  return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
})); // [ { name: 'john', age: 25 }, { name: 'park', age: 45 }, { name: 'ro', age: 35 }, { name: 'smith', age: 15 } ]


// 내림차순(ES6)
console.log(person.sort((a, b) => {
  return a.name > b.name ? -1 : a.name < b.name ? 1 : 0;
})); // [ { name: 'smith', age: 15 }, { name: 'ro', age: 35 }, { name: 'park', age: 45 }, { name: 'john', age: 25 } ]

// 내림차순(ES5)
console.log(person.sort(function(a, b) {
  return a.name > b.name ? -1 : a.name < b.name ? 1 : 0;
})); // [ { name: 'smith', age: 15 }, { name: 'ro', age: 35 }, { name: 'park', age: 45 }, { name: 'john', age: 25 } ]


/* 나이순으로 정렬 */
// 숫자끼리 비교할 때는 뺄셈연산자를 사용한다.

const sortingField = "age";

// 오름차순(ES6)
console.log(person.sort((a, b) => {
  return a[sortingField] - b[sortingField];
})); // [ { name: 'smith', age: 15 }, { name: 'john', age: 25 }, { name: 'ro', age: 35 }, { name: 'park', age: 45 } ]

// 오름차순(ES5)
console.log(person.sort(function(a, b) {
  return a[sortingField] - b[sortingField];
})); // [ { name: 'smith', age: 15 }, { name: 'john', age: 25 }, { name: 'ro', age: 35 }, { name: 'park', age: 45 } ]


// 내림차순(ES6)
console.log(person.sort((a, b) => {
  return b[sortingField] - a[sortingField];
})); // [ { name: 'park', age: 45 }, { name: 'ro', age: 35 }, { name: 'john', age: 25 }, { name: 'smith', age: 15 } ]

// 내림차순(ES5)
console.log(person.sort(function(a, b) {
  return b[sortingField] - a[sortingField];
})); // [ { name: 'park', age: 45 }, { name: 'ro', age: 35 }, { name: 'john', age: 25 }, { name: 'smith', age: 15 } ]