JavaScriptで null, undefined, ''(空文字), 0 を簡単にチェックする方法

条件式で対象をチェックするだけでOK

if (チェックしたい対象) {
   /*
    * 対象が null, undefined, ''(空文字), 0 などでない場合に実行されます
    */
}

JavaScript の条件式は真偽値以外も入れることができます。
そして、「条件式で真偽値以外の型を評価する場合、強制的に Boolean に型変換する」というルールがあります。
false、0、""、null、undefined および NaN は false とみなされ、それ以外は true とみなされます。

例

undefined や null チェック

例えば、Array.prototype.find は値が見つからなかった場合、undefined を返します。
値が undefined なオブジェクトのプロパティにアクセスすると例外が発生します。
以下の例では変数 lang が null や undefined 出ない場合のみプロパティにアクセスすることができます。

const languages = [
    { name: 'JavaScript' },
    { name: 'PHP' },
    { name: 'Python' },
]

const lang = languages.find(l => l.name === 'Ruby');
if (lang) {
    console.log(lang.name);
}

また、オブジェクトを引数にとる関数はしばしば null 例外を発生させます。
しかし、一度条件式を通すことでこの典型的な例外を防ぐことができます。

// ショートサーキット評価も利用可能
const greeting = (lang) => lang && `Hello ${lang.name} !!`
console.log(greeting(null));

0 チェック

JavaScript で 0 が false とみなされることは厄介な問題です。
しかし、配列が要素を持つ場合のみ実行したい場合、この性質が役に立ちます。

// 配列 languages が null や undefined でないかつ、１つ以上の要素を持つ場合に真とみなされる。
if (languages && languages.length) {
    
}

空文字チェック

フォームの検証ではユーザーが入力したテキストが空でないかチェックしたい場面がよくあります。
以下の例ではテキストボックスの入力が空やスペースのみの場合に偽とみなし、false を返します。

const txt = document.getElementById('txtBoxId').value

const isVlaid = (str) => !!str.trim()
console.log(isValid(txt))

// ※注 document.getElementById は要素が見つからな場合 nullを返します。
// 上記の例では value に直接アクセスしていますが、必要な場合、検証を行ってください。