[JavaScript] Sort( ) 정렬

arr.sort([compareFunction])

: 배열의 요소를 정렬해주는 메소드

괄호안의 매개변수가 필수가 아니라는 의미로 대괄호[]로 묶어 정의한다.

1. 매개변수가 없을 때

sort()에 매개변수가 주어지지 않는다면, 어떻게 정렬이 될까?
아래코드를 살펴보자.

a=[10,20,5,4,3];
console.log(a.sort()); //[10,20,3,4,5]

매개변수를 생략한 경우, 문자기준으로 오름차순 정렬이 된다. 숫자를 문자로 인식해 첫번째 문자열을 기준으로 오름차순 정렬이 되는것이다.
여기서 "10"의 첫번재 문자 "1"이 가장 작기에 "20"의 앞에 정렬된다.

2. compareFunction

문자열로 인식된 정렬이 아니라 우리가 원하는 숫자 정렬을 하기 위해서는 compareFunction을 선언해주면 된다.
compareFunction이 주어지면, sort는 compareunction에게 배열 요소를 2개씩 반복해서 보내고, 결과값에 따라 정렬을 한다. 여기서 보내는 2개의 요소를 a,b라고 하면, 결과값에 따른 정렬은 아래와 같다.
결과 < 0 : a가 b보다 앞에 있다.
결과 == 0 : a와 b의 순서변동이 없다.
결과 > 0 : b가 a보다 앞에 있다.

a=[10,20,5,4,3];
console.log(a.sort((a,b)=>{
  return a-b; // 오름차순
}); 
console.log(a.sort((a,b)=>{
return b-a; // 내림차순
}))

sort 함수는 원본을 변경하는 함수임을 주의 ❗
또한 return문이 한줄인 경우로 주로 화살표 함수로 나타낸다는 점을 알아두자.

3. 객체 정렬

sort()를 통해 객체의 프로퍼티를 참조해 정렬할 수 있다.

market = {
  fruits : [
  {name: 'banana', price : 2000},
  {name: 'apple', price : 1000},
  {name: 'tomato', price: 3000},
  {name: 'mango' , price: 500}
  ]
}
market.fruits.sort((a,b)=>a.price - b.price) // 오름차순 정렬
console.log(market);
// {
//   "fruits": [
//     {
//       "name": "mango",
//       "price": 500
//     },
//     {
//       "name": "apple",
//       "price": 1000
//     },
//     {
//       "name": "banana",
//       "price": 2000
//     },
//     {
//       "name": "tomato",
//       "price": 3000
//     }
//   ]
// }

market의 fruits의 가격이 오름차순으로 정렬되어 출력된 것을 확인할 수 있다.

4. 조건문 정의

compareFunction안에 if문을 사용해서 조건에 따른 정렬을 할 수 있다.

문제 : n과 가장 갭이 작은 순으로 정렬, 갭이 같다면 큰 수가 앞으로 오도록 하자.

a = [4,10,8,15,20];
n = 9;
a.sort((a,b)=>{
  const [agap,bgap] = [Math.abs(a-n),Math.abs(b-n)];
  if(agap == bgap) return b-a; //갭이 같다면 내림차순 정렬
  else return agap - bgap; // 다르다면 갭이 작은 순으로 정렬(오름차순)
})
console.log(a); // [10,8,4,15,20]

sort()함수의 compareFunction내에서 변수를 지정했고, 이 변수가 n과의 갭의 값을 가지고 있다. 갭이 같을때는 return b-a;로 큰 수가 앞으로 오도록 내림차순 정렬을 해주었고, 같지 않다면 agap - bgap;로 갭이 작은 순으로 오름차순 정렬을 해주었다.

이번 포스팅으로 compare함수를 어떻게 작성하는가에 따라 정렬되는 방식이 달라진다는 점을 이해할 수 있었다. 이를 응용해서 여러 문제에 써먹어 봐야지😇