(1) sort 문법이 뭔가요?

• 배열의 요소를 정렬(sorting)하는 데에 사용됩니다.
• 정렬된 이후의 배열을 반환합니다.
• 기본 문법은 다음과 같아요.

  // []가 있다는 것은 'optional'임을 의미합니다.
  array.sort([compareFunction])

• 기본적 특징을 같이 알아봅니다

  1. 정렬이 된 배열을 반환

  2. 배열 그 자체가 변환

     // 이와 같은 상황에서 문제가 생길 수 있겠죠.
     // 배열 originalArray에 중요한 데이터가 있고,
     // 이 배열을 정렬된 형태로 사용하고 싶지만, 원본 배열도 그대로 유지하고 싶다고 합시다.
     let originalArray = [3, 1, 4, 1, 5, 9]; // 123
     
     // 원본 배열을 복사한 후 정렬하려는 시도
     let sortedArray = originalArray; // 
     sortedArray.sort();
     
     console.log("Sorted Array: ", sortedArray);
     console.log("Original Array: ", originalArray);

     위 코드의 의도는 sortedArray를 정렬하고, originalArray를 그대로 유지하는 것입니다. 그러나 출력 결과는 다음과 같습니다

     Sorted Array: [1, 1, 3, 4, 5, 9]
     Original Array: [1, 1, 3, 4, 5, 9]

     이를 해결하기 위해서 solution 2개를 설명해드릴께요.

  • solution (1)

    let originalArray = [3, 1, 4, 1, 5, 9];
    
    // 원본 배열의 복사본을 만들고 그것을 정렬
    let sortedArray = originalArray.slice().sort();
    
    console.log("Sorted Array: ", sortedArray);
    console.log("Original Array: ", originalArray);

  • solution (2)

    ```jsx
    let originalArray = [3, 1, 4, 1, 5, 9];
    
    // 원본 배열의 복사본을 만들고 그것을 정렬
    let sortedArray = [...originalArray].sort();
    
    console.log("Sorted Array: ", sortedArray);
    console.log("Original Array: ", originalArray);
    ```

    왜 let sortedArray = originalArry; 는 안되나요?

(2) sort 의 기본 원리

sort 비교 함수의 작동 방식은 이렇게 됩니다!

✅ 시작하기 전! 비교 함수란 무엇인가요?

→ 위에서 살펴보았던 sort 문법을 사용하는 방법은 이렇습니다.

array.sort([compareFunction])

즉, 비교함수란 [compareFunction] 자리에 들어가는 함수를 말합니다.

sort 메서드에는 정렬 순서를 정의하는 비교 함수를 전달할 수 있습니다(optional). 만일 이 함수를 생략한다면

const arr = **[1, 2, 9, 80];**
arr.sort();

// 1, 2, 9, 80

배열 요소들이 문자열로 ‘자동’ 변환되어 각 문자의 유니코드 코드 포인트 값에 따라 정렬됩니다.

✅ **유니코드 코드 포인트란?**

유니코드 표준에서 각 문자에 할당된 고유한 숫자 값입니다. 유니코드는 전 세계의 모든 문자 시스템을 하나의 일관된 문자 세트로 표현하기 위해 설계된 국제적인 코딩 표준입니다.

유니코드에서 각 문자, 기호 또는 텍스트 요소는 고유한 "코드 포인트"로 식별됩니다. 이 코드 포인트는 일반적으로 U+ 다음에 4자리 또는 그 이상의 16진수로 표현됩니다. 예를 들어, 영문 대문자 A는 "U+0041", 한글 '가'는 "U+AC00"으로 표현됩니다.

그래서 이런 문제가 생길 수도 있어요.

compareFunction이 제공되지 않으면 요소를 문자열로 변환하고 유니 코드 코드 포인트 순서로 문자열을 비교하여 정렬됩니다. 예를 들어 "바나나"는 "체리"앞에옵니다. 숫자 정렬에서는 9가 80보다 앞에 오지만 숫자는 문자열로 변환되기 때문에 "80"은 유니 코드 순서에서 "9"앞에옵니다.

테스트 해 볼까요?

const testArr = [2, 1, 9, 80];

한땀한땀 찍어보기

(3) 오름차순(ascending) & 내림차순(descending)

• 이제 이해할 수 있겠죠?

(4) sort()와 sort((a, b) ⇒ a - b)의 차이점

(5) 다양한 상황에서의 sort 응용

(1) 객체로 이루어진 배열의 정렬

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

// value 기준으로 정렬
items.sort(function (a, b) {
  if (a.value > b.value) {
    return 1;
  }
  if (a.value < b.value) {
    return -1;
  }
  // a must be equal to b
  return 0;
});

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

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

(2) 조건부 sort

• 각 객체가 age와 name 속성을 가짐
• 이 배열을 age 속성에 따라 오름차순으로 정렬하되, age가 같은 경우에는 name 속성으로 사전순으로 정렬

let people = [
    { name: "John", age: 25 },
    { name: "Jane", age: 20 },
    { name: "Mary", age: 25 },
    { name: "Mark", age: 30 }
];

people.sort((a, b) => {
    if (a.age === b.age) {
        // 나이가 같으면 이름으로 정렬
        return a.name.localeCompare(b.name);
    }
    // 나이로 정렬
    return a.age - b.age;
});

console.log(people);