JavaScript에서 undefined가 포함된 배열을 오름차순으로 정렬하는 방법

undefined가 포함된 배열 정렬하기

실무에서는 문자열과 undefined가 뒤섞인 배열을 다뤄야 할 때가 종종 있습니다. 예를 들어 다음과 같이 학생 이름과 undefined 값이 함께 들어 있는 배열이 있다고 가정해 보겠습니다.

var studentNames = ["Mike", undefined, "Adam", "Bob", undefined, "Carol"];

이 배열에는 네 개의 이름("Mike", "Adam", "Bob", "Carol")과 두 개의 undefined 값이 포함되어 있습니다. 목표는 이름들은 알파벳 오름차순으로 정렬하고, undefined 값은 배열의 맨 뒤로 보내는 것입니다. 이럴 때 sort() 메서드에 비교 함수를 전달하면 원하는 기준대로 정렬할 수 있습니다.

sort() 메서드와 비교 함수 활용

다음은 localeCompare()를 사용해 문자열을 사전순으로 비교하고, 배열을 오름차순으로 정렬하는 예제 코드입니다.

var studentNames = ["Mike", undefined, "Adam", "Bob", undefined, "Carol"];

var sortingInAscendingOrder = (first, second) => {
   if (first === "") return 1;
   if (second === "") return -1;
   return first.localeCompare(second);
};

studentNames.sort(sortingInAscendingOrder);
console.log(studentNames);

코드 실행 방법

Node.js 환경에서 위 프로그램을 실행하려면 터미널에 다음 명령어를 입력합니다. 파일 이름은 본인이 작성한 파일명으로 바꿔 주시면 됩니다(예: demo275.js).

node fileName.js

실행 결과

콘솔에는 다음과 같은 출력 결과가 나타납니다.

PS C:\Users\Amit\javascript-code> node demo275.js
[ 'Adam', 'Bob', 'Carol', 'Mike', undefined, undefined ]

동작 원리

실행 결과를 보면 문자열 요소들이 'Adam' → 'Bob' → 'Carol' → 'Mike' 순서로 깔끔하게 정렬되고, undefined 값 두 개는 자동으로 배열의 끝으로 이동한 것을 확인할 수 있습니다. 참고로 ECMAScript 명세에 따르면 sort()는 undefined 값을 항상 다른 값보다 큰 것으로 간주해 배열의 마지막에 배치하므로, 비교 함수가 undefined를 직접 처리하지 않아도 결과적으로 뒤로 밀려나게 됩니다. 다만 빈 문자열("")이 포함될 가능성이 있는 배열이라면 위 코드처럼 비교 함수 안에서 명시적으로 처리해 주는 것이 안전합니다.