JavaScript에서 null 값이 포함된 객체를 배열 맨 뒤로 정렬하는 방법

JavaScript 프로그래밍을 하다 보면 객체 배열 안에 null 값이 섞여 있는 경우가 종종 있습니다. 이때 일반적인 정렬 방식을 그대로 사용하면 null 값 때문에 비교 연산이 제대로 이루어지지 않아 의도하지 않은 결과가 나올 수 있습니다.

이번 글에서는 객체의 특정 키(key)가 null로 매핑되어 있을 때, 해당 객체들을 배열의 맨 뒤로 밀어내는 정렬 함수를 작성하는 방법을 알아보겠습니다.

문제 상황 정리

요구 사항은 다음과 같습니다.

• 객체 배열을 입력으로 받는 JavaScript 함수를 작성한다.
• 특정 키의 값이 null인 객체들은 배열의 가장 끝으로 이동시킨다.
• null이 아닌 나머지 객체들은 기존의 오름차순 규칙에 따라 정렬한다.

해결 아이디어

핵심은 Array.prototype.sort() 메서드에 전달할 비교 함수(comparator)를 커스터마이징하는 것입니다. 비교하기 전에 값이 null인 경우 이를 매우 큰 숫자인 Infinity로 치환하면, 자연스럽게 null 값을 가진 객체가 정렬 결과의 맨 뒤로 밀려나게 됩니다.

예제 코드

실제 동작하는 코드는 다음과 같습니다.

const arr = [
    {key: 'a', value: 100},
    {key: 'a', value: null},
    {key: 'a', value: 0}
];

const sortNullishValues = (arr = []) => {
    // null이면 Infinity로 치환하여 항상 마지막에 위치하도록 함
    const assignValue = val => {
        if(val === null){
            return Infinity;
        }
        else{
            return val;
        };
    };
    // 두 객체의 value를 비교하는 정렬 함수
    const sorter = (a, b) => {
        return assignValue(a.value) - assignValue(b.value);
    };
    arr.sort(sorter);
}

sortNullishValues(arr);
console.log(arr);

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 출력이 나타납니다.

[
    { key: 'a', value: 0 },
    { key: 'a', value: 100 },
    { key: 'a', value: null }
]

코드 설명

1. assignValue 함수

assignValue 함수는 전달받은 값이 null인지 검사합니다. 만약 null이라면 Infinity를 반환하고, 그렇지 않으면 원래 값을 그대로 반환합니다. 어떤 숫자와 비교해도 Infinity는 항상 더 크기 때문에 정렬 시 맨 뒤로 배치됩니다.

2. sorter 비교 함수

sorter는 sort() 메서드에 사용되는 비교 함수입니다. 두 객체의 value를 각각 assignValue로 변환한 뒤 차감하여 오름차순 정렬을 수행합니다.

3. 주의 사항

JavaScript의 sort() 메서드는 원본 배열을 직접 수정(mutate)합니다. 원본 배열을 유지하고 싶다면 정렬 전에 스프레드 문법([...arr])으로 복사본을 만들어 사용하는 것이 좋습니다.

이처럼 null 값을 Infinity로 치환하는 간단한 트릭만으로 별도의 필터링이나 추가 로직 없이 깔끔하게 원하는 정렬 결과를 얻을 수 있습니다.