[JavaScript] sort() 메서드

자바스크립트 애플리케이션에서 데이터 정렬은 필수적인 기능입니다. 이번에는 배열을 정렬하는 sort() 메서드의 기본 사용법부터, 까다로운 숫자 정렬을 완벽하게 처리하는 방법까지 핵심만 살펴보겠습니다.

1. sort()의 기본 작동 방식 (문자열)

sort() 메서드는 기본적으로 배열의 요소를 문자열(string)로 변환한 후, 유니코드 값 순서대로 정렬합니다. 문자열 배열에 대해서는 기대한 대로 알파벳 순서(오름차순)로 잘 작동합니다.

• 특징: sort() 메서드는 **원본 배열 자체를 변경(mutate)**합니다. 사본을 만들지 않고 바로 원본을 수정한다는 점에 유의해야 합니다.

JavaScript

const owners = ['Jonas', 'Zach', 'Adam', 'Martha'];
owners.sort(); // 결과: ['Adam', 'Jonas', 'Martha', 'Zach']
// owners 배열 자체도 변경됨

---

2. 숫자를 위한 sort() 커스터마이징 (비교 함수)

sort()를 숫자 배열에 그대로 적용하면 예상치 못한 결과를 얻게 됩니다. 이는 기본 정렬 방식이 숫자를 문자열로 취급하기 때문입니다.

JavaScript

const movements = [200, 450, -400, 3000];
movements.sort(); // 결과: [-400, 200, 3000, 450]
// -는 먼저, 그 다음 1로 시작하는 200, 3으로 시작하는 3000, 4로 시작하는 450 순으로 정렬됨 (문자열 기준)

숫자 정렬을 올바르게 하려면, **비교 콜백 함수(Compare Callback Function)**를 sort() 메서드에 인수로 전달해야 합니다. 이 함수는 배열 내의 두 요소 $\text{a}$와 $\text{b}$를 비교하여 다음 세 가지 규칙 중 하나를 따르는 값을 반환합니다.

반환 값	의미	결과
<0 (음수)	$\text{a}$를 $\text{b}$보다 앞에 둔다 (순서 유지)	[a, b]
>0 (양수)	$\text{b}$를 $\text{a}$보다 앞에 둔다 (순서 변경)	[b, a]
=0	순서 변경 없음

 

2.1. 오름차순(Ascending) 정렬

작은 수에서 큰 수로 정렬합니다. $\text{a}$가 $\text{b}$보다 작다면(순서 유지), 음수를 반환해야 합니다.

• 간소화 공식: a - b
  • a>b 이면, $\text{a} - \text{b}$는 양수 → $\text{b}$가 앞으로 (순서 변경)
  • a<b 이면, $\text{a} - \text{b}$는 음수 → $\text{a}$가 앞으로 (순서 유지)

JavaScript

// 오름차순 정렬 (작은 수 -> 큰 수)
movements.sort((a, b) => a - b);
// 결과: [-400, 200, 450, 3000]

2.2. 내림차순(Descending) 정렬

큰 수에서 작은 수로 정렬합니다.

• 간소화 공식: b - a
  • a>b 이면, $\text{b} - \text{a}$는 음수 → $\text{a}$가 앞으로 (순서 유지)
  • a<b 이면, $\text{b} - \text{a}$는 양수 → $\text{b}$가 앞으로 (순서 변경)

JavaScript

// 내림차순 정렬 (큰 수 -> 작은 수)
movements.sort((a, b) => b - a);
// 결과: [3000, 450, 200, -400]

---

3. 정렬 기능 구현 시 주의 사항: 불변성(Immutability)

실제 애플리케이션에서 정렬 기능을 구현할 때는 원본 데이터를 보존하는 것이 중요합니다. sort()는 원본 배열을 변경하기 때문에, 원본을 건드리지 않으려면 정렬 전에 배열의 사본을 만들어서 사용해야 합니다.

• 사본 생성 및 정렬: slice() 메서드를 사용하여 원본 배열의 얕은 복사본을 만든 다음, 이 복사본에 sort()를 체이닝(Chaining)하여 적용합니다.이 방법을 통해 화면에 정렬된 데이터를 표시하면서도, 계좌 객체에 저장된 실제 데이터는 원래 순서를 유지할 수 있습니다.
•  

  // 원본 movements는 그대로 유지하고, 정렬된 사본을 만듭니다.
  const sortedMovs = movements.slice().sort((a, b) => a - b);
  

• JavaScript