[javascript] 배열 6-1 / 배열 정렬(sort, localCompare)

sort()

• 배열의 요소를 정렬할 때 사용
• 기본 동작: 문자열 유니코드 순서로 정렬
• 숫자 정렬: compareFn을 사용하여 직접 비교

// [문법 - 문자열 기준 유니코드 순서]
배열.sort();

// [문법 - 비교 함수 포함]
배열.sort((첫번째값, 두번째값) => {
  // 비교 로직
  return 결과; // 음수, 0, 양수
});

 

---

문자열 정렬

• 유니코드 순서로 정렬
• 그냥 sort()만 쓰면 대소문자 구분, 한글이나 특수 문자 등에서 직관적인 순서가 나오지 않을 수 있음
• 문자열 비교는 localeCompare를 사용하면 알파벳 순서, 한글 순서 등 지역 기준으로 정렬 가능

const arr = ['apple', 'Banana', 'cherry'];
arr.sort();
console.log(arr); // ['Banana', 'apple', 'cherry']

// 대문자 B가 소문자 a보다 유니코드 값이 작아서 먼저 나옴

---

localeCompare()

• 문자열을 사용자의 지역/언어 규칙에 맞게 비교해 주는 메서드

// [문법]
문자열1.localeCompare(문자열2, [지역코드], [옵션]);

 

항목	sort() 기본	localeCompare 사용
영어 소문자	유니코드 순서	지역 기준 정렬, 옵션으로 대소문자 무시 가능
영어 대문자	유니코드 순서 → 소문자보다 먼저	옵션 { sensitivity: 'base' } 사용 시 소문자와 동등 취급
한글	유니코드 기준 → 가나다 순서 아님	'ko' 옵션 → 사전 순서 기준 (김 → 이 → 홍)
특수문자	유니코드 기준 → 문자 코드 순	지역 규칙 적용 가능, 일부 언어에서는 특수문자 순서 조정
대소문자 혼합	대문자 먼저, 소문자 나중	{ sensitivity: 'base' } 사용 시 대소문자 구분 없이 정렬

 

localeCompare 옵션 설정의 필요성

• localeCompare 사용 시 언어나 sensitivity를 설정하지 않아도 동일한 결과를 출력
  그러나, 환경(브라우저, Node.js 등)에 따라 기본 locale이 다르면 결과가 달라질 수 있음 

경우	옵션 필요성	설명
영어 단순 소문자/대문자 혼합	거의 필요 없음	기본 localeCompare도 대부분 비슷하게 정렬
영어 특수문자, 국제 문자 포함	필요할 수 있음	'en'과 sensitivity 옵션으로 환경 상 차이 방지
한글, 일본어 등	필수 권장	'ko', 'ja' 등 지정해야 사전 순서 정확하게 정렬

---

영문 정렬

const arr = ['apple', 'Banana', 'cherry'];
arr.sort((a, b) => a.localeCompare(b));
console.log(arr); // ['apple', 'Banana', 'cherry']

 

arr.sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'base' }));
// ['apple', 'Banana', 'cherry'] → 대소문자 무시

한글 정렬

const arr = ['홍길동', '김철수', '이영희'];
arr.sort((a, b) => a.localeCompare(b, 'ko'));
console.log(arr); // ['김철수', '이영희', '홍길동']

/*
- 'ko' 옵션 → 한글 사전 순서 기준으로 정렬
- 그냥 sort()만 쓰면 유니코드 기준으로 섞여서 나올 수 있음
*/

---

숫자 정렬

• 기본적으로 문자열 기준 유니코드 순서로 정렬하여 숫자 배열에 그냥 사용하면 예상과 다르게 나올 수 있음
• Why? 숫자를 문자열로 변환 후 유니코드 순서로 비교
   ex) '100' < '20' → 유니코드 기준에서 1 < 2 이므로 순서가 뒤바뀜
• 숫자는 반드시 비교함수(compareFn)를 사용해야 정확히 정렬

const nums = [10, 5, 100, 20];
nums.sort();
console.log(nums); // [10, 100, 20, 5]

---

숫자 비교함수(compareFn)

// [문법]
배열.sort((첫번째값, 두번째값) => {
  return 결과; // 음수, 0, 양수
});

반환값	설명
음수(<0)	첫번째 값이 앞
0	순서 유지
양수(>0)	두번째 값이 앞

 

오름차순 숫자 정렬

 

• (a, b) => a - b
• a - b가 음수 → a가 b보다 앞
• 0 → 순서 유지
• 양수 → b가 a보다 앞

 

nums.sort((a, b) => a - b);
console.log(nums); // [5, 10, 20, 100]

내림차순 숫자 정렬

 

• (a, b) => b - a
• b - a가 음수 → b가 a보다 뒤
• 큰 값이 앞 → 내림차순

 

nums.sort((a, b) => b - a);
console.log(nums); // [100, 20, 10, 5]