[Javascript] 자바스크립트 문자 정렬에 대한 모든 것 (sort, localeCompare ⭐️ )

뭔가 문자열 정렬을 코딩 테스트 때 말고 사용하는 경우가 많이 없어서 익숙하지 않은 것 같아 한번 정리하려고 한다. 

 

사실 자바스크립트에서 숫자 오름차순 정렬을 하게 되면 그냥 아래와 같이 간단하기 빼기 연산으로 해주면 된다. 

[1, 2, 5, -1].sort((a, b)=> a - b);

 

하지만 문자열은 이렇게 해서는 원하는 정렬을 기대하기가 어렵다. 

 

"잘못된 코드"

["apple", "Orange", "banana", "grape"].sort((a, b)=>a - b)

// result 
['apple', 'Orange', 'banana', 'grape']

 

이렇게 하면 문자열 간 빼기 연산 진행을 못해 기존 문자열 그대로 반환이 된다. 

 

그다음 해볼 수 있는 방법은 문자의 대소를 비교해서 1, -1, 0 을 리턴해주는거다. 영어를 정렬하는 경우에는 대소문자까지 신경써서 콜백을 넣어줘야한다. 

["apple", "Orange", "banana", "grape"].sort((a, b) => {
  const lowerA = a.toLowerCase();
  const lowerB = b.toLowerCase();

  if (lowerA === lowerB) {
    // 대소문자가 같다면 원래 문자열로 비교하여 대문자가 뒤로 가도록 함
    return a > b ? 1 : -1;
  }
  return lowerA > lowerB ? 1 : -1;
});

 

이렇게 하면 각 나라 문자마다 조건을 넣어줘야한다는건데 굉장히 복잡하고 알아보기도 힘들다.

 

그래서 결국 사용할 수 있는 가장 좋은 방법은 ⭐️ "localeCompare" ⭐️ 를 사용하는거다.

// 영어 정렬

const words = ["apple", "Orange", "banana", "grape"];

// localeCompare로 문자열 정렬
words.sort((a, b) => a.localeCompare(b));

console.log(words); // ["apple", "banana", "grape", "Orange"]

// 한국어 정렬

const words = ["가방", "나무", "다람쥐", "가게", "바나나"];

words.sort((a, b) => a.localeCompare(b));

console.log(words); // ["가게", "가방", "나무", "다람쥐", "바나나"]

 

It's that simple... ㅠㅠㅠㅠ 이걸 몰라서 코테 할 때 혼자 애를 먹고 있었다. 바보다 바보 바보였던 기억을 살려 꼭 기억해 두는게 좋을 것 같다.

 

 

더 자세한 내용은 공홈을 확인하자. 문자열 뿐만 아니라 숫자 정렬, 각 특수문자 정렬에 대한 설명도 나와있다. 

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