[Javascript] 문자열 배열 정렬 (오름차순, 내림차순)

문자열들이 저장된 배열이 있을 때, 이 배열을 오름차순 또는 내림차순으로 정렬해야 할 때가 자주 있습니다.

 

문자열 값들이 이름인 경우, 보기 좋게 오름차순으로 정렬할 수도 있고, 정렬하는 것이 사전 순서로 보이기 때문에 보는 사람들이 어떤 것을 찾을 때 쉽게 찾을 수 있습니다.

 

이 글에서는 문자열 배열을 오름차순, 내림차순으로 정렬하는 방법에 대해서 알아보려고 합니다.

 

문자열 배열, 오름차순 정렬

arr.sort()는 문자열 배열 arr의 값들을 오름차순으로 정렬합니다. arr의 값 순서가 변경되기 때문에, 원본 데이터의 순서가 변경될 수 있습니다. 만약 원본 데이터의 변경을 원하지 않으면 복사한 뒤에 복사한 객체로 정렬해야 합니다.

let arr = ["하니", "혜린", "민지", "다니엘"];

arr.sort();

console.log(arr);

Output:

[ '다니엘', '민지', '하니', '혜린' ]

 

사실 sort() 함수는 아래와 같이 정렬 규칙이 구현된 함수를 인자로 받습니다. 아래와 같이 인자로 함수를 전달하면, 함수를 사용하여 배열 값들의 크기를 비교하여 정렬합니다. 아래 함수는 오름차순으로 배열을 정렬하는 규칙입니다.

let arr = ["하니", "혜린", "민지", "다니엘"];

arr.sort(function (a, b) {
  return a.localeCompare(b);
});

console.log(arr);

 

문자열 배열, 내림차순 정렬

아래 코드는 내림차순으로 정렬하는 예제입니다. 정렬 규칙에 대한 함수를 보시면, 위에서 소개한 것과 반대로 비교합니다. 즉, 오름차순과 반대로 정렬하게 되며, 이것이 바로 내림차순으로 정렬하는 것입니다.

let arr = ["하니", "혜린", "민지", "다니엘"];

arr.sort(function (a, b) {
  return b.localeCompare(a);
});

console.log(arr);

Output:

[ '혜린', '하니', '민지', '다니엘' ]

 

위의 코드는 화살표 함수를 사용하여 아래와 같이 더 간단히 구현할 수 있습니다. 인자로 전달된 함수를 보시면 더 간결해진 것을 확인할 수 있습니다. 실행해보면 내림차순으로 정렬되는 것을 확인할 수 있습니다.

let arr = ["하니", "혜린", "민지", "다니엘"];

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

console.log(arr);