[JS] 문자열 배열 정렬 (영어,한글)

GitHub - hyukson/hangul-util: 한글 관련 자바스크립트 유틸 라이브러리입니다.

'hangul-util' 라이브러리 코드를 기반으로 작성된 포스트입니다.

 

sortByASC(['멜론', '귤', '참외']);
// [ '귤', '멜론', '참외' ]

sortByGroups(["대리", "사원", "사장", "회장", "부장"], groups);
// [ '회장', '사장', '부장', '대리', '사원' ]

 

Array.sort() 메서드

const data = ['a가가', '나나', 'ac', '가가', 'aa'];

data.sort();

console.log(data);
// ['aa', 'ac', 'a가가', '가가', '나나']

기본적으로 sort 메서드는 인자 값(compareFunction)을 생략하게 되면 유니코드 값에 따라 오름차순 정렬됩니다.

 

비교 연산자 사용하기

'가나가' > '가나나' // false
'b' > 'a' // true

자바스크립트에서는 비교 연산자를 이용해서 문자열을 비교할 수 있습니다. 이를 이용해서 서로의 문자열을 비교하여 정렬시켜줍니다.

 

// 오름차순 (ASC)
['a가가', '나나', 'ac', '가가', 'aa'].sort((a, b) => a > b ? 1 : -1);

// 내림차순 (DESC)
['a가가', '나나', 'ac', '가가', 'aa'].sort((a, b) => a > b ? -1 : 1);

 

localeCompare 메서드 사용하기

// 오름차순
['a가가', '나나', 'ac', '가가', 'aa'].sort((a, b) ⇒ a.localeCompare(b));
// 내림차순
['a가가', '나나', 'ac', '가가', 'aa'].sort((a, b) ⇒ b.localeCompare(a));

localeCompare 메서드는 문자열의 사전상 순서에서 해당 문자가 뒤에 있는지 앞에 있는지 또는 같은지를 판단하여 1, 0, -1의 반환 값을 주는 메서드입니다.

 

sort 메서드는 0과 음수, 양수의 반환 값을 필요로 하기에 localeCompare() 메서드로 쉽게 구현할 수 있습니다.

 

객체 배열 정렬

const data = [{ name: '노란색' }, { name: '초록색' }, { name: '검정색' }];

// 비교연산자
[...data].sort((a, b) => a.name > b.name ? 1 : -1);

// localeCompare 메서드
[...data].sort((a, b) => a.name.localeCompare(b.name));

객체로 구성된 배열을 정렬시키는 방법은 정렬을 시켜주는 기준을 객체의 Value 값으로 잡아서 비교해줍니다.

 

특정값 정렬 기준 만들기

// 정렬 기준
const orderBy = ['회장', '사장', '부장', '과장', '사원'];

const data = ['사장', '사원', '회장', '부장', '과장', '사원'];

data.sort((a, b) => orderBy.indexOf(a) - orderBy.indexOf(b));
// [ "회장", "사장", "부장", "과장", "사원", "사원" ]

직급 순과 같이, 가나다순 정렬이 아닌 특정한 정렬의 기준을 만들어서 정렬시켜줄 수 있습니다.

 

참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Array.prototype.sort() - JavaScript | MDN

 

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

String.prototype.localeCompare() - JavaScript | MDN