sort()에 대해 알아보기

짤 보고 빡빡 웃음

생각보다 sort()를 사용할 일이 많은데 사용할때마다 헷갈려서 다시 정리한다. 딱 대

1. sort()는 2가지 모드로 움직인다

첫번째는 기본 정렬 모드

두번째는 비교함수(콜백) 정렬 모드

내가 많이 사용한건 비교함수 정렬이었는데 일단 둘 다 알아보자!

 

1️⃣ 기본 정렬 - 아무것도 넘기지 않을 때

기본적으로 이렇게 생겼다.

arr.sort();

sort()에 아무 비교 함수(Comparison Function)를 전달하지 않으면 배열의 요소들은 문자열로 변환된 뒤 유니코드 값에 따라 정렬된다.

이러한 경우 문자열 배열에선 예상대로 작동할 순 있지만 숫자 배열은 이상하게 배열할 수 있다.

 

(1) 문자열 배열

각 문자열을 유니코드 값에 따라 비교하므로 일반적인 사전 순 정렬과 동일하게 작동한다.

const fruits = ['Banana', 'Apple', 'Cherry', 'Zebra', 'apple']

fruits.sort()

console.log(fruits) // ["Apple", "Banana", "Cherry", "Zebra", "apple"]

위와 같이 출력되는 이유는 대문자(A,B,C,Z)가 소문자(a)보다 유니코드 값이 작기 때문이다

• 대문자 'A': U+0041 (16진수)
• 소문자 'a': U+0061 (16진수)

(2) 숫자 배열

숫자 배열에선 각 숫자가 문자열로 변환된 후 정렬되기 때문에 숫자의 크기가 아닌 첫번째 문자의 유니코드값을 기준으로 정렬된다. 그래서 정확한 숫자 순서로 정렬되지 않음.

const number = [10, 5, 200, 1, 50]

number.sort()

console.log(number) // [1, 10, 200, 5, 50]

• 1: U+0031
• 2: U+0032
• 5: U+0035

따라서 숫자를 올바르게 정렬하고 싶으면 비교 함수를 전달해야 한다.

2️⃣ 비교 함수(=콜백) 정렬 - 지시사항을 넘길 때

arr.sort((a, b) => { ... });

여기선 내가 작성한 콜백 함수에 따라 정렬한다.

 숫자 정렬 뿐 만 아니라

• 객체 정렬
• 문자열 대소문자 무시 정렬
• 날짜 정렬
• 복합 기준 정렬

등등 복잡한 것들도 여기서 해결할 수 있다. 개인적인 체감으론 문자열 정렬, 숫자 정렬, 날짜 정렬이 제일 많이 쓰이는것 같다. 객체 정렬은 문자/숫자/날짜 정렬에 낑겨서 포함된 느낌?

 

(1) 숫자 오름차순

const number =  [10, 5, 200, 1, 50]

// a - b가 음수면 (a가 작으면) a가 b보다 앞에 위치
number.sort((a, b) => a - b)

console.log(number) // [1, 5, 10, 50, 200]

 

(2) 숫자 내림차순

const number = [10, 5, 200, 1, 50]

// b-a가 음수면 (b가 작으면) b가 a보다 앞에 위치
number.sort((a, b) => b - a)

console.log(number) // [200, 50, 10, 5, 1]

이렇게 a - b 일때 오름차순이고 b - a 가 내림차순인 이유는 sort()가 "작은 값을 먼저 앞에 두는 정렬"을 원칙으로 하고 있기 때문이다.

이건 지피티의 보충 설명이 필요하다.

✨ 그럼 왜 a - b = 오름차순일까?

a - b를 하면
a가 더 작으면 음수가 나오지?
음수가 나오면 sort는 “a, 너 앞줄로!”라고 판단해.

그래서 작은 값이 앞으로 모이면서 오름차순이 완성돼.

예시 흐름을 감각적으로 보면:

• 1 - 10 = 음수 → 1이 더 앞
• 5 - 10 = 음수 → 5가 더 앞
• 200 - 50 = 양수 → 50이 더 앞

이런 판단을 계속 반복하면서 정렬이 끝나는 거야.

---

✨ 반대로 b - a = 내림차순인 이유

이번엔 비교 기준을 반대로 뒤집어.

b - a가 음수라는 건
b가 a보다 작다는 뜻이고,

그래서 sort는 “그럼 b가 먼저!”라고 판단해.

이렇게 되면 큰 숫자가 점점 앞으로 모여서 내림차순이 돼.

---

✨ 한 줄 요약으로 적으면 이렇게 바꿀 수 있어

정렬의 방향은 “음수가 나왔을 때 누구를 앞에 둘지”로 결정된다.
a - b는 “a가 작으면 앞”이라는 기준이어서 오름차순이 되고,
b - a는 기준을 뒤집어서 내림차순이 된다.

이렇게 설명하면 ‘음수니까 앞에 간다 → 그게 누굴 뜻하지?’ 흐름이 매우 자연스럽게 이어져.

(3) 날짜 정렬

const events = [
  { name: 'A', date: '2023-10-15' },
  { name: 'B', date: '2024-01-01' },
  { name: 'C', date: '2023-12-25' }
]

events.sort((a, b) => {
  const dateA = new Date(a.date).getTime() // 밀리초 단위 숫자를 얻는 메소드
  const dateB = new Date(b.date).getTime()
  
  return dateB - dateA // 내림차순 정렬
})

console.log(events)
/* [
  { name: 'B', date: '2024-01-01' }, // 최신
  { name: 'C', date: '2023-12-25' },
  { name: 'A', date: '2023-10-15' }  // 오래됨
] 
*/

 

2. 내가 작성한 예시

참고로 나같은 경우 날짜 정렬이기 때문에 무조건 콜백함수의 전달이 필요했다.

댓글의 작성 시간을 기준으로 오름차순/내림차순을 결정하는 로직을 작성했다.

  // cmnts, ascending : 부모로부터 받는 props값
  // cmnts : 댓글 목록
  // ascending : 오름, 내림차순 정렬 
  const [ascend, setAscend] = useState(ascending ?? true)
  
  const sortCmnts = useMemo(()=> {
    return [...cmnts].sort((a, b) => {
      const cA = new Date(a.insertDatetime ?? new Date().toISOString())
      const cB = new Date(b.insertDatetime ?? new Date().toISOString())
      if (ascend) {
        // true인 경우 = ascending
        return cA.getTime() - cB.getTime()
      } else {
        // false인 경우 = descending
        return cB.getTime() - cA.getTime()
      }
    })
  }, [cmnts, ascend])

➕useMemo : 비용이 많이 드는 함수의 호출 결과를 저장해 두었다가 동일한 입력(의존성 배열)이 들어오면 함수를 재실행하지 않고 저장된 값을 반환 React Hook.. 여기선 안중요함

 

여기서도 cA와 cB를 통해 댓글 목록에서 댓글 작성 시간(insertDatetime)을 알아내고(timpstampz 타입이라 가능함), 오름차순인 경우 a - b, 내림차순일 경우 b - a라는 공식(?)을 이용하여 작성하였다.

insertDatetime라는 값으로부터 밀리초가 포함된 데이터를 추출하고(getTime()), ascend가 true라면(= 오름차순이라면) cA.getTime - cB.getTime, false라면(= 내림차순이라면) cB.getTime() - cA.getTime()을 한 것이다.

 

[+ 참고 자료]

https://velog.io/@yunsungyang-omc/JS-%EB%B0%B0%EC%97%B4-%EC%A0%95%EB%A0%AC-%EB%A9%94%EC%86%8C%EB%93%9C-sort

(JS) 배열 정렬 메소드, sort()

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

Array.prototype.sort() - JavaScript | MDN