【JavaScript】falsyな値を持つオブジェクトを配列の末尾に移動してソートする方法

次のようなオブジェクトの配列があるとします。

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

この配列に対して、「value」プロパティがfalsy（偽値）であるオブジェクトをすべて配列の末尾へ移動し、それ以外のオブジェクトは「value」プロパティの降順で並べ替えるJavaScript関数を作成する必要があります。

アプローチ：sort()メソッドとカスタム比較関数

この問題は、配列のsort()メソッドに独自の比較関数を渡すことでエレガントに解決できます。まず、プロパティの値が「数値以外のfalsyな値」かどうかを判定するヘルパー関数isValFalsy()を定義します。

falseやnull、undefined、''（空文字列）などはいずれもfalsyとして評価されますが、0も同じくfalsyになる点には注意が必要です。本コードでは0を有効な数値として通常どおりソートしたいので、typeof演算子による型チェックを条件に組み合わせています。

サンプルコード

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

// 数値以外のfalsyな値かどうかを判定する
const isValFalsy = (obj) => !obj.value && typeof obj.value !== 'number';

const sortFalsy = arr => {
    arr.sort((a, b) => {
        // 両方ともfalsyなら順序を維持
        if(isValFalsy(a) && isValFalsy(b)){
            return 0;
        }
        // aだけfalsyならaを後ろへ
        if(isValFalsy(a)){
            return 1;
        }
        // bだけfalsyならbを後ろへ
        if(isValFalsy(b)){
            return -1;
        }
        // どちらも有効な値ならvalueの降順で比較
        return b.value - a.value;
    });
};

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

コードのポイント

• isValFalsy()： !obj.valueでfalsyかどうかを確認し、さらにtypeof obj.value !== 'number'によって0のような有効な数値を除外しています。
• return 0： 両方の要素がfalsyであれば、相対的な順序は変更されません。
• return 1 / return -1： 片方だけがfalsyの場合、その要素が常に配列の後ろに配置されるように制御しています。
• b.value - a.value： どちらの値も有効な場合は、大きい値が先頭に来る降順となるよう比較しています。

出力結果

コンソールには以下の出力が表示されます。

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

このように、falsyな値を持つオブジェクト（falseとnull）が配列の末尾にまとめられ、数値を持つオブジェクトは100 → 23の順に正しく降順ソートされていることが確認できます。