JavaScript에서 숫자와 문자열이 섞여 있는 배열을 다루다 보면, 숫자는 오름차순으로 먼저 정렬하고 그 뒤에 문자열을 알파벳 순서로 정렬해야 하는 경우가 있습니다. 이번 글에서는 Array.prototype.sort() 메서드와 사용자 정의 비교 함수를 활용해 이러한 자연 정렬(natural sort)을 구현하는 방법을 살펴보겠습니다.
문제 정의
다음과 같은 배열이 있다고 가정해 보겠습니다.
const arr = [1, 'fdf', 'afv', 6, 47, 7, 'svd', 'bdf', 9];
이 배열을 정렬하면 아래와 같은 결과가 나와야 합니다.
[1, 6, 7, 9, 47, 'afv', 'bdf', 'fdf', 'svd']
즉, 모든 숫자가 크기 순으로 앞쪽에 배치되고, 문자열들은 알파벳 순서대로 그 뒤에 정렬됩니다. 그럼 바로 코드를 작성해 보겠습니다.
구현 코드
const arr = [1, 'fdf', 'afv', 6, 47, 7, 'svd', 'bdf', 9];
const sorter = (a, b) => {
if(typeof a === 'number' && typeof b === 'number'){
return a - b;
}else if(typeof a === 'number' && typeof b !== 'number'){
return -1;
}else if(typeof a !== 'number' && typeof b === 'number'){
return 1;
}else{
return a > b ? 1 : -1;
}
}
arr.sort(sorter);
console.log(arr);
실행 결과
콘솔에는 다음과 같이 출력됩니다.
[ 1, 6, 7, 9, 47, 'afv', 'bdf', 'fdf', 'svd' ]
코드 분석
이 코드의 핵심은 sorter 비교 함수입니다. sort() 메서드의 콜백 함수는 두 개의 인수(a, b)를 받으며, 각각 서로 비교할 배열의 요소입니다. 반환값에 따라 요소의 순서가 결정되는데, 음수를 반환하면 a가 b보다 앞에, 양수를 반환하면 b가 a보다 앞에 위치하게 됩니다.
비교 함수에서 고려해야 할 경우는 네 가지입니다.
- a와 b가 모두 숫자인 경우 →
a - b를 반환해 작은 숫자가 큰 숫자보다 앞에 오도록 합니다. - a는 숫자이고 b는 문자열인 경우 → 문제의 요구 사항에 따라 숫자(a)를 문자열(b)보다 앞에 배치하기 위해 -1을 반환합니다.
- a는 문자열이고 b는 숫자인 경우 → 반대로 b를 a보다 앞에 배치하기 위해 1을 반환합니다.
- a와 b가 모두 문자열인 경우 → 알파벳 순서상 더 앞에 오는 문자열을 앞쪽에 배치합니다.
참고: 문자열 비교 개선하기
위 코드에서는 문자열끼리 비교할 때 단순 비교 연산자(>)를 사용했습니다. 하지만 대소문자가 섞인 문자열이나 한글처럼 유니코드 기준 순서와 직관적인 순서가 다른 문자를 다룰 때는 localeCompare()를 사용하는 것이 더 안전하고 자연스러운 결과를 제공합니다.
return a.localeCompare(b);
이렇게 하면 대소문자나 특수 문자가 포함된 데이터도 환경 설정(locale)에 맞는 올바른 순서로 정렬할 수 있습니다.