25.04.13 - sort, compareFunction

sort 동작 원리

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

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

compareFunction이 제공되면 배열 요소는 compare 함수의 반환 값에 따라 정렬

1. a와 b가 비교되는 두 요소라면, compareFunction(a, b)이 0보다 작은 경우
   a를 b보다 낮은 색인으로 정렬합니다. 즉, a가 먼저옵니다.
   ➡️ return < 0이면 a가 앞에 와야 하니까 a가 b보다 작음 ⇒ 오름차순

2. compareFunction(a, b)이 0을 반환하면 a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬합니다. 참고 : ECMAscript 표준은 이러한 동작을 보장하지 않으므로 모든 브라우저(예 : Mozilla 버전은 적어도 2003 년 이후 버전 임)가 이를 존중하지는 않습니다.
   ➡️ return === 0이면 자리 안 바꿈

3. compareFunction(a, b)이 0보다 큰 경우, b를 a보다 낮은 인덱스로 소트합니다.
   ➡️ return > 0이면 b가 앞에 와야 하니까 b가 a보다 작음 ⇒ 내림차순

compareFunction(a, b)은 요소 a와 b의 특정 쌍이 두 개의 인수로 주어질 때 항상 동일한 값을 반환해야합니다. 일치하지 않는 결과가 반환되면 정렬 순서는 정의되지 않습니다.

따라서 compare 함수의 형식은 다음과 같습니다.

🖥️ js

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

---

정리

• sort는 원본 배열을 직접 정렬하므로 배열 복사본 사용 권장.
• sort는 comparefunction의 return 값에 따라 배열을 정렬한다.
• sort((a, b) => a - b)는 오름차순, sort((a, b) => b - a) 는 내림차순
  인데 문제는 저걸 무지성으로 익숙하게 써와서, compareFunction이 조금 길어지니까 혼란스러워한 나 자신이지.
• return과 중괄호는 같이 쓰거나 같이 생략합니다!!!!!!! 정신 차려 이 각박한 세상 속에서
• return문은 가독성과 스타일과 경우를 고려해 작성하자.

1️⃣ (a, b) => b.count - a.count

2️⃣ (a, b) => {
  if (b.count > a.count) return 1;
  if (b.count < a.count) return -1;
  return 0;
}

---

플홀 메인 정렬 코드

🖥️ ThumbnailArea.tsx

  if (sortType === "popular") {
    sortedThumbnails = [...headhuntingsData.result].sort((a, b) => {
      const likeCountA = a.likeCount;
      const likeCountB = b.likeCount;
      return likeCountB - likeCountA;
    });
  } else if (sortType === "newest") {
    // 최신순
    sortedThumbnails = [...headhuntingsData.result].sort((a, b) => {
      const createdA = new Date(a.createdAt).getTime();
      const createdB = new Date(b.createdAt).getTime();
      return createdB - createdA;
    });
  } else if (sortType === "adDeadline") {
    // 마감임박순
    sortedThumbnails = [...headhuntingsData.result].sort((a, b) => {
      const deadlineA = new Date(a.adEndedAt).getTime();
      const deadlineB = new Date(b.adEndedAt).getTime();
      return deadlineA - deadlineB;
    });
  }