자바스크립트에서 falsy 값을 가진 배열 객체를 맨 뒤로 정렬하는 방법

다음과 같이 여러 객체를 담고 있는 배열이 있다고 가정해 보겠습니다.

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

여기서 우리가 작성해야 할 자바스크립트 함수는 다음 두 가지 작업을 동시에 수행해야 합니다.

• value 속성이 falsy(거짓 같은 값)인 객체들을 배열의 맨 뒤로 이동시킵니다.
• 나머지 객체들은 value 속성을 기준으로 내림차순으로 정렬합니다.

예제 코드

다음은 위 요구 사항을 구현한 전체 코드입니다.

const arr = [
    {key: 'a', value: false},
    {key: 'a', value: 100},
    {key: 'a', value: null},
    {key: 'a', value: 23}
];
const isValFalsy = (obj) => !obj.value && typeof obj.value !== 'number';
const sortFalsy = arr => {
    arr.sort((a, b) => {
        if(isValFalsy(a) && isValFalsy(b)){
            return 0;
        }
        if(isValFalsy(a)){
            return 1;
        };
        if(isValFalsy(b)){
            return -1;
        };
        return b.value - a.value;
    });
};
sortFalsy(arr);
console.log(arr);

코드 설명

코드가 어떻게 동작하는지 단계별로 살펴보겠습니다.

• isValFalsy 함수: !obj.value로 해당 값이 falsy인지 먼저 확인합니다. 여기에 typeof obj.value !== 'number' 조건을 추가했기 때문에 숫자 0은 유효한 값으로 취급됩니다. 즉, false, null, undefined, 빈 문자열 등만 falsy로 판단됩니다.
• sortFalsy 함수: Array.prototype.sort()의 비교 함수 안에서 두 객체를 비교합니다. 두 객체가 모두 falsy면 순서를 유지하고(return 0), a만 falsy면 뒤로 밀어내며(return 1), b만 falsy면 앞으로 당깁니다(return -1).
• 내림차순 정렬: 두 값이 모두 유효한 경우 b.value - a.value를 반환하여 큰 값이 앞에 오도록 정렬합니다.

출력 결과

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

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

결과를 보면 유효한 숫자 값(100, 23)이 내림차순으로 앞쪽에 배치되고, falsy 값(false, null)을 가진 객체들이 뒤쪽으로 밀려난 것을 확인할 수 있습니다.