JavaScriptで配列からnull値だけを除外する方法

はじめに

JavaScriptでは、undefined、false、0などの偽値（falsyな値）が混在する配列の中から、nullだけを取り除きたいケースがあります。本記事では、元の配列を直接書き換える形（in place）で、null値のみを削除する関数の実装方法を解説します。

要件の確認

作成するのは、偽値を含む配列を受け取り、そこに存在するすべてのnull値だけを配列から取り除くJavaScript関数です。重要なのは、undefinedやfalseといった他の偽値はそのまま残すという点です。

例えば、次のような入力配列があったとします。

const arr = [12, 5, undefined, null, 0, false, null, 67, undefined, false, null];

この場合、期待される出力は以下の通りです。

const output = [12, 5, undefined, 0, false, 67, undefined, false];

nullだけを正確に判定する仕組み

ここで鍵となるのが、typeof演算子の挙動です。JavaScriptでは歴史的な仕様上、typeof nullは"object"を返します。つまり、「データ型がobjectであり、かつfalsyである値」はJavaScriptにnullしか存在しません。この性質を利用することで、undefinedやfalseを誤って削除することなく、nullだけを正確に判別できます。

コード例

const arr = [12, 5, undefined, null, 0, false, null, 67, undefined, false, null];

const removeNullValues = arr => {
  for(let i = 0; i < arr.length; ){
    // nullのデータ型はobjectであり、falsyな値
    // JavaScriptに存在する唯一のfalsyなオブジェクトがnull
    if(typeof arr[i] === 'object' && !arr[i]){
      arr.splice(i, 1);
    } else {
      i++;
      continue;
    }
  }
};

removeNullValues(arr);
console.log(arr);

コードのポイント

• spliceメソッドの使い方： splice(i, 1)で該当要素を1つ削除します。削除後は後続の要素が前に詰められるため、インデックスiをインクリメントせずに同じ位置を再度チェックするのがポイントです。
• 条件式の意味： typeof arr[i] === 'object' && !arr[i] という組み合わせにより、型がobjectかつfalsyである要素＝nullのみが条件に一致します。

出力結果

コンソールには以下のように出力されます。

[ 12, 5, undefined, 0, false, 67, undefined, false ]

補足：filterメソッドによる代替手法

より簡潔に書きたい場合は、filterメソッドを使うこともできます。

const filtered = arr.filter(value => value !== null);
console.log(filtered); // [ 12, 5, undefined, 0, false, 67, undefined, false ]

ただし、filterは新しい配列を返す方式のため、元の配列自体は変更されません。元の配列を直接書き換えたい場合は、本記事で紹介したspliceを使った方法が適しています。用途に応じて使い分けるとよいでしょう。