JavaScriptで配列からnullを除外する方法｜filter()を使った実践テクニック

JavaScriptで配列に含まれるnullやundefinedなどの不要な値を取り除き、有効な値だけを表示したい場面はよくあります。そんなときに便利なのが、配列の組み込みメソッドであるfilter()です。

filter()メソッドは、コールバック関数がtrueを返す要素だけを集めた新しい配列を作成します。コールバックとしてobj => objのように渡すと、falsyな値（null、undefined、空文字列など）が自動的に除外されます。

サンプルコード

var names = [null, "John", null, "David", "", "Mike", null, undefined, "Bob", "Adam", null, null];
console.log("null除去前の配列=");
console.log(names);

var filterNullValues = names.filter(obj => obj);

console.log("nullを除外した後の配列=");
console.log(filterNullValues);

プログラムの実行方法

上記のプログラムを実行するには、Node.js環境で以下のコマンドを使用します。

node fileName.js

実行結果

ここではファイル名をdemo148.jsとしています。実行すると、次のような出力が得られます。

PS C:\Users\Amit\JavaScript-code> node demo148.js
Before filter null=[
    null, 'John',
    null, 'David',
    '', 'Mike',
    null, undefined,
    'Bob', 'Adam',
    null, null
]
After filtering the null values=
[ 'John', 'David', 'Mike', 'Bob', 'Adam' ]

解説のポイント

filter()の仕組み

filter(obj => obj)では、各要素がそのまま真偽値として評価されます。JavaScriptではnull、undefined、""（空文字列）、0、false、NaNは「falsy（偽とみなされる値）」であるため、これらすべてが新しい配列から除外されます。

nullのみを厳密に除外したい場合

空文字列などは残し、nullとundefinedだけを取り除きたい場合は、より明示的な条件を指定します。

var result = names.filter(obj => obj !== null && obj !== undefined);

このように書くことで、意図した値だけを正確に制御できます。データの性質に応じて使い分けることが重要です。