[Javascript] sort 메서드 활용하기(feat. 객체, Map)

🗂️ sort 메서드

배열 메서드인 sort()는 기존 배열 자체를 오름차순 또는 내림차순으로 정렬합니다.

요소들을 문자열로 취급하여 정렬하기 때문에 콜백 함수 없이 sort()만 사용한다면 숫자의 대소 관계가 아닌 사전 순으로 정렬됩니다.

 

sort()는 배열의 두 요소를 반복적으로 비교하면서 비교 함수의 반환값이 음수인지 양수인지에 따라 요소의 순서를 결정합니다.

return a - b  // < 0 라면 a가 b보다 크다 -> a, b 순서 유지
return a - b  // > 0 라면 a가 b보다 작다 -> a, b 위치 교환
return a - b  // = 0 라면 a와 b가 같다 -> 현재 순서 그대로 유지
// 최종적으로 오름차순 정렬이 됨

따라서 비교 함수를 통해 다양한 요소를 기준으로 정렬 방식을 커스텀할 수 있습니다.

아래에서 비교 함수를 활용해 특별한 경우의 요소를 정렬하는 예시를 살펴 보겠습니다.

 

sort 메서드의 기본적인 동작 방식과 예시는 이전 글을 참고해 주세요.

[Javascript] 자주 쓰이는 배열 메서드(요소 추가, 배열 순회/탐색/정렬 등)

[Javascript] 자주 쓰이는 배열 메서드(요소 추가, 배열 순회/탐색/정렬 등)

 

---

🗂️ 활용 1) 객체 정렬

users 배열에 담긴 객체를 age 기준으로 오름차순 정렬하는 코드는 다음과 같습니다.

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 20 }
  { name: "Emma", age: 18 },
];

users.sort((a, b) => a.age - b.age);

배열의 요소인 객체의 age 프로퍼티 값을 기준으로 오름차순 정렬합니다.

 

결과적으로 users 배열은 나이가 적은 사람부터 많은 사람 순으로 정렬된 배열이 됩니다.

/**
결과:
[
  { name: "Emma", age: 18 },
  { name: "Bob", age: 20 }
  { name: "Alice", age: 25 },
]
*/

 

---

🗂️ 활용 2) Map 정렬

Map의 요소들을 value 값(과일의 개수) 기준으로 정렬하는 코드는 다음과 같습니다.

const fruit = new Map([
  ["apple", 3],
  ["banana", 1],
  ["orange", 2],
]);

const sortedFruitByValue = new Map(
  [...map].sort((a, b) => a[1] - b[1])
);

Map은 배열이 아니기 때문에 spread 문법을 사용하여 내부 데이터를 펼친 뒤, [ ]로 감싸 배열 형태로 변환합니다.

이 과정에서 Map은 2차원이 배열이 되고, 각 요소는 ["apple", 3]과 같이 [key, value] 형태의 1차원 배열이 됩니다. 

이후 array[1]에 담긴 값(과일의 개수)을 기준으로 오름차순 정렬합니다.

 

정렬이 끝난 후 다시 Map으로 변환하면 sortedFruit은 개수가 적은 과일부터 많은 과일 순으로 정렬된 Map이 됩니다.

/**
결과:
Map(3) {
  'banana' => 1,
  'orange' => 2,
  'apple' => 3,
}
*/

 

만약 value 값이 아닌 key 값을 기준으로 오름차순 정렬하고 싶다면 array[0]으로 적어주면 됩니다.

const sortedFruitByKey = new Map(
  [...map].sort((a, b) => a[0] - b[0])
);

 

---

🗂️ 활용 3) 커스텀 정렬

sort 메서드는 비교 함수의 반환값이 음수인지, 양수인지에 따라 정렬 순서를 결정합니다.

이 원리를 이해했다면 정렬 기준이 되는 값을 직접 만들어 커스텀 정렬을 할 수 있습니다.

 

배열에 담긴 문자열 숫자를 이어 붙였을 때 가장 큰 수가 되도록 정렬하는 코드는 다음과 같습니다.

const strNumbers = ["3", "30", "34", "5", "9"];

strNumbers.sort((a, b) => {
  if (`${a}${b}` > `${b}${a}`) return -1;
  if (`${a}${b}` < `${b}${a}`) return 1;
  return 0;
});

위의 코드는 숫자를 단순 비교하는 것이 아니라 문자열을 이어 붙인 결과를 비교합니다.

예를 들어, "3"과 "30"을 비교할 때 330과 303을 비교해 어떤 순서가 더 큰 수를 만드는지 판단합니다.

 

결과적으로 strNumbers 배열은 요소를 앞에서부터 차례로 이어붙였을 때 가장 큰 수가 만들어지도록 정렬됩니다.

/**
결과:
["9", "5", "34", "3", "30"]
*/

프로그래머스의 '가장 큰 수' 문제를 참고했습니다.

 

---

읽어주셔서 감사합니다:)