JavaScript sort()를 활용해 배열에서 NaN을 맨 뒤로 정렬하는 방법

문제 상황

문자열과 숫자가 혼합된 데이터 타입을 담고 있는 배열이 있을 때, NaN 값이 항상 배열의 맨 뒤에 위치하도록 정렬하는 함수를 작성해야 합니다.

정렬된 배열은 다음과 같은 순서를 따라야 합니다.

• 유효한 숫자들이 가장 앞에 위치
• 그다음 문자열 리터럴
• 마지막에 NaN 값들

해결 방법

JavaScript의 sort() 메서드에 커스텀 비교 함수를 전달하면 이 문제를 해결할 수 있습니다. 핵심은 NaN의 고유한 특성을 활용하는 것입니다. NaN은 자기 자신과도 같지 않다는 특징(NaN !== NaN)이 있기 때문에, 이를 이용해 값이 NaN인지 손쉽게 판별할 수 있습니다.

const arr = [344, 'gfd', NaN, '', 15, 'f', 176, NaN, 736, NaN, 872, 859,
'string', 13, 'new', NaN, 75];
const sorter = (a, b) => {
    if(a !== a){
        return 1;
    }else if(b !== b){
        return -1;
    }
    return typeof a === 'number' ? -1 : 1;
};
arr.sort(sorter);
console.log(arr);

코드 설명

• a !== a: 값이 자기 자신과 같지 않다면 그 값은 NaN이라는 의미입니다. a가 NaN일 경우 1을 반환하여 뒤로 밀어냅니다.
• b !== b: 반대로 b가 NaN일 경우 -1을 반환하여 a를 앞으로 당깁니다.
• typeof a === 'number' ? -1 : 1: 두 값 모두 NaN이 아닐 경우, a가 숫자면 앞으로, 아니면(문자열이면) 뒤로 정렬합니다.

출력 결과

콘솔에 출력되는 결과는 다음과 같습니다.

[
    75, 13, 859,
    872, 736, 176,
    15, 344, 'gfd',
    '', 'f', 'string',
    'new', NaN, NaN,
    NaN, NaN
]

실행 결과를 보면 유효한 숫자들이 먼저 배치되고, 그 뒤에 문자열들이, 마지막에 NaN 값들이 정렬된 것을 확인할 수 있습니다.