[JavaScript] sort()

김현주·2022년 2월 16일
0

JavaScript

목록 보기
3/3
post-thumbnail

Array.sort()?

sort()매서드는 배열의 요소를 정렬한 후 그 배열을 반환한다.

array.sort([compareFunction])

  • compareFunction : 정렬순서를 정의하는 함수, 생략시 배열은 각 ASCII문자 기준 오름차순으로 정렬된다.

🚨 참고) 대괄호([]) : 안의 매개변수는 필수가 아니고 상황에 따라 생략이 가능하다는 뜻

const numbers = [2, 3, 5, 7, 1, 10];
numbers.sort();
console.log(numbers); // [1, 10, 2, 3, 5, 7]
  • 왜 10시 2보다 앞에 있을까?
    → ASCII 문자 기준으로 정렬할 때, 숫자 타입을 문자열(String)타입으로 형 변환을 하기 때문이다.
    → 형 변환 이후에 첫 번째 문자를 기준으로 비교하기 때문에 10은 문자1이 앞에 있기 때문에 "10"은 "2"보다 앞에 위치하게 된다.

compareFunction

compareFunction을 선언할 경우 sort()함수는 compareFunction에게 배열의 요소를 2개씩 반복해서 보낸 후, compareFnction이 반환하는 값을 기준으로 정렬한다.
① 반환값 < 0 : a가 b보다 앞에 정렬된다.
② 반환값 = 0 : a와 b의 순서를 바꾸지 않는다.
③ 반환값 > 0 : b가 a보다 앞에 정렬된다.

// 1. 오름차순의 경우
const numbers = [2, 3, 5, 7, 1, 10];
function numbersCompare(a, b){
  return a - b;
}
numbers.sort(numbersCompare);

console.log(numbers); // [1, 2, 3, 5, 7, 10]

// 2. 내림차순의 경우
const numbers = [2, 3, 5, 7, 1, 10];
function numbersCompare(a, b){
  return b - a;
}
numbers.sort(numbersCompare);

console.log(numbers); // [10, 7, 5, 3, 2, 1]

위의 예시처럼 numbersCompare함수를 만들어서 사용해도 되지만, 단순한 계산의 경우 익명함수를 사용하거나 ES6부터 도입된 화살표함수(ArrowFunction)를 사용한다.

// 1. 익명함수 사용
numbers.sort(function(a,b) {
  return a - b;
});

// 2. Arrow Function(화살표함수) 사용
numbers.sort( (a, b) => a - b );

Sort()함수 응용

1. Object정렬

const phones = {
  phone: [
    {
      name: "iphone 13 mini",
      price: 950000,
    },
    {
      name: "갤럭시 Z플립3",
      price: 1254000
    },
    {
      name: "iphone 13",
      price: 1090000,
    }
  ]
}
phones.phone.sort((a, b) => {
  return a.price - b.price
});
console.log(phones);
// 결과
{
  phone: [
    {
      name: "iphone 13 mini",
      price: 950000,
    },
    {
      name: "iphone 13",
      price: 1090000,
    },
    {
      name: "갤럭시 Z플립3",
      price: 1254000
    }
  ]
}

2. 조건부 정렬

compareFunction 안에 if문을 사용하여 정렬 조건을 직접 정의할 수 있다.

// 요소가 0일 경우 맨 끝에 정렬, 그렇지 않는 경우 오름차순으로 정렬
const numbers = [0, 3, 2, 0, 1, 4, 0, 5];
numbers.sort(function(a, b){
  if( a === 0){
  	return 1;
  } else if( b === 0 ){
  	return -1;
  } else {
  	return a - b;
  }
});
console.log(numbers); // [1, 2, 3, 4, 5, 0, 0, 0]
profile
✨프론트엔드 개발자가 되기 위한 독학러✨

0개의 댓글