개발

[JS 꿀팁] 문자열 정렬 시 사용할 함수 String.localeCompare()

눌지 2025. 4. 10. 13:54

개발을 하다 보면 정렬하는 경우가 있습니다. 이때 저는 배열을 만들고 sort() 함수를 사용합니다. 기본적으로 정렬할 때 최적화된 방법으로 계산을 해주니 따로 추가로 구현할 일이 없기에 편하게 사용합니다.

 

이때 문자열을 역순으로 정렬할 필요가 있는 경우가 발생합니다.

 

그럴 때 저는 원래 아래와 같은 코드를 사용했습니다.

const arr:string[] = ['a', 'b', 'ac', 'ab'];

arr.sort((a,b) => a < b ? 1 : -1);
// ['b', 'ac', 'ab', 'a']

 

하지만 JS에서 제공하는 함수를 잘 살펴보면 String.localeCompare()라는 문자열의 순서를 비교해 같으면 0, 빠르면 음수, 느리면 양수를 반환하는 함수가 있습니다.

 

예를 들어, 다음과 같은 결과를 확인할 수 있습니다.

console.log('a'.localeCompare('a')); // 0
console.log('a'.localeCompare('b')); // 1
console.log('a'.localeCompare('c')); // -1

 

이 함수를 활용하면 좀 더 명확하게 정렬을 구현할 수 있습니다. (명확하다고 작성한 이유는 기존 코드에서 사용된 문자열의 크기 비교보다 함수를 활용하는 것이 많은 개발자에게 보기 좋다고 생각했습니다.)

 

const arr:string[] = ['a', 'b', 'ac', 'ab'];

// 이때 역순을 원했기 때문에 b를 기준으로 비교해야 합니다.
arr.sort((a,b) => b.localeCompare(a));
// ['b', 'ac', 'ab', 'a']

 

기존 코드보다 더 깔끔한 느낌을 받을 수 있습니다.

 

추가적으로 localeCompare 함수는 거의 모든 브라우저에서 사용이 가능합니다. 하지만 제공하는 기능 중 locales, options 인자에 대해서는 일부 브라우저에서 지원하지 않으니 확인하고 사용해야 합니다.

https://caniuse.com/?search=localeCompare

 

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare