JavaScript에서 falsy 값을 가진 객체를 배열 맨 아래로 정렬하는 방법

JavaScript로 개발하다 보면 객체 배열을 특정 기준에 따라 정렬해야 하는 경우가 자주 발생합니다. 이번 글에서는 falsy 값을 가진 객체를 배열의 맨 아래로 밀어내고, 나머지 객체들은 값의 내림차순으로 정렬하는 방법을 알아보겠습니다.

문제 상황

다음과 같은 객체 배열이 있다고 가정해 보겠습니다.

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

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

value 속성이 falsy 값(false, null, undefined, 0, 빈 문자열 등)인 객체는 모두 배열의 맨 아래로 이동시킵니다.
나머지 유효한 값들을 가진 객체들은 value 속성을 기준으로 내림차순으로 정렬합니다.

해결 코드

먼저, 객체의 value가 falsy인지 판별하는 헬퍼 함수를 작성합니다.

const isValFalsy = (obj) => !obj.value && typeof obj.value !== 'number';

이 함수는 !obj.value로 falsy 여부를 확인하고, typeof obj.value !== 'number' 조건을 추가하여 숫자 0까지는 유효한 값으로 취급할지 여부를 제어할 수 있습니다. 위 코드에서는 0도 falsy로 처리하지 않도록 설계되어 있습니다.

이제 실제 정렬을 수행하는 함수를 작성해 보겠습니다.

const sortFalsy = arr => {
    arr.sort((a, b) => {
        // 둘 다 falsy인 경우 순서 유지
        if(isValFalsy(a) && isValFalsy(b)){
            return 0;
        }
        // a가 falsy면 뒤로 보냄
        if(isValFalsy(a)){
            return 1;
        }
        // b가 falsy면 a를 앞으로 보냄
        if(isValFalsy(b)){
            return -1;
        }
        // 둘 다 유효한 값이면 내림차순 정렬
        return b.value - a.value;
    });
};

sortFalsy(arr);
console.log(arr);

정렬 로직 살펴보기

Array.prototype.sort() 메서드의 비교 함수(comparator)는 반환값에 따라 요소의 순서를 결정합니다.

양수(1)를 반환하면 a가 b 뒤로 이동합니다.
음수(-1)를 반환하면 a가 b 앞으로 이동합니다.
0을 반환하면 순서가 유지됩니다.

따라서 위 코드에서는 falsy 값을 가진 객체에 양수를 반환하게 하여 자연스럽게 배열 끝으로 밀어내고, 두 객체 모두 유효한 값일 때는 b.value - a.value를 반환해 내림차순 정렬을 수행합니다.

실행 결과

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

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

실행 결과를 보면 100과 23처럼 유효한 숫자 값은 내림차순으로 앞쪽에 배치되고, false와 null 같은 falsy 값은 배열의 맨 아래로 이동한 것을 확인할 수 있습니다.

마무리

이처럼 비교 함수 안에서 조건 분기를 활용하면 단순한 오름차순·내림차순 정렬을 넘어, 특정 조건의 요소를 우선순위에 따라 배치하는 커스텀 정렬을 손쉽게 구현할 수 있습니다. 실무에서는 목록에서 데이터가 없는 항목을 하단으로 내리는 UI를 만들 때 이런 패턴이 유용하게 사용됩니다.