localeCompare을 통한 문자열 정렬

JS에서 정렬 기능을 사용할 땐 Array.sort() 메서드를 주로 사용한다.

arr.sort([compareFunction)

이 때 compareFunction이 제공될 경우, 배열 요소는 해당 함수의 return 값에 따라 정렬된다.
→ return값이 0보다 큰지, 같은지, 작은지에 따라 정렬 index가 달라짐!

따라서 숫자가 담긴 Array의 경우

numbers.sort(function(a, b) {
  return a - b;
});

와 같은 형태로 간편하게 오름차순 정렬을 구현할 수 있겠다.

이 때 문제는... 현 서비스에서는 숫자가 아닌, 문자 정렬을 해야하는 경우가 대부분이라는 것!
(고객 이름 순 정렬, 견종 이름 순 정렬 등등...)

문자열의 경우

// mdn 예제
items.sort(function(a, b) {
  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // 이름이 같을 경우
  return 0;
});

이 와 같이 크기를 비교해줄 수 있다. 
이 때 정렬 순서는? → 해당 요소의 유니 코드 코드 포인트 순서!

여기서 생기는 자그마한 문제점...! 
유니 코드 순서이다보니, 일반적으로 생각하는 한글 정렬 순서와 다른 경우가 발생할 수 있다.

 

localeCompare

이러한 상황에서 string의 localeCompare 메서드가 유용하게 쓰일 수 있다.

String.prototype.localeCompare()

해당 메서드는 비교 인자의 순서가 전에 오는지, 후에 오는지, 동등한지 를 나타내는 정수를 반환한다.

이 때, 반드시 순서가 전/후 일 경우 반드시 -1/1이 반환된다고 보장할 수는 없지만
(브라우저별, 버전별 차이 존재)
반드시 음의 값/양의 값(동등할 경우 0)이 반환된다!

localeCompare(compareString)
localeCompare(compareString, locales)
localeCompare(compareString, locales, options)

locales와 options를 통해 정렬에 사용될 언어를 지정하고, 함수 동작을 직접 정의하는 것도 가능하다.

 

items.sort(function(nameA, nameB) {  
  return nameA.localeCompare(nameB, 'ko')
});

따라서 우리가 원했던 문자열 정렬에 찰떡처럼 사용할 수 있다