JavaScriptでは`0`も`null`、`undefined`もすべて同じ判定になるけど分ける方法ないの？

タイトルの通り、こんな場合どうするか。if (!value)と書いてしまうと、0、null、undefinedの全部がtrueとして判定されてしまう。
null、undefinedだけtrue判定にしたいケースがあったので調べてみた。

[JavaScript] null とか undefined とか 0 とか空文字('') とか false とかの判定についてに大体書いてあるが、このトピックの部分だけまとめてみた。

TL;DR

if (value == null)を使うのが一番スマートな書き方のようです。

1. `if (value === undefined || value === null)`

愚直に値をundefinedとnullと比較する方法。

誰が見ても分かりやすいが、どこか野暮ったい。

この書き方が最も明示的で誰にもわかりやすいと思うが、もっとシンプルに書きたい場合もあるだろう。

2. `if (!value && value !== 0)`

2番目の書き方よりは短くなったが、少し分かりづらくなった気がする。

3. `if (value == null)`

この書き方だとvalueの値が0の時はfalse判定になる。厳密等価演算子ではなく等価演算子「==」を使っているため、valueの値がnullとundefinedの時は同様にtrueとして判定されるようだ。２、３番目の書き方よりも簡潔な条件式になった。

厳密には次のようなカラクリらしい。

比較演算子 - JavaScript | MDN

等価演算子は、2 つのオペランドが同じ型でないならばオペランドを変換して、それから厳密な比較を行います。両方のオペランドがオブジェクトならば、 JavaScript は内部参照を比較するので、オペランドがメモリ内の同じオブジェクトを参照するときに等しくなります。

ということで、if (value == undefined)でも同じ結果となるが、文字数的にはnullの方が簡潔になる。

否定の時はif (value != null)でOK。（valueがnullとundefined以外の時にtrue判定となる）

ESLintで引っかからないか気になったが、大丈夫だった（設定によっては指摘されるかも？）。

4. `if (value ?? true)`

【2020/07/04追記】
コメントでNull合体演算子というのを教えてもらった。これを使うと、nullとundefinedの時は右の値を返して、それ以外のとき（0も空文字も）は左の値を返してくれるそう。

// `leftVal`が`null`と`undefined`の時だけ`rightVal`を返す
if (leftVal ?? rightVal)

~~等価演算子を使わなくてもいいので、これが一番きれいに書けそう（だが知らない人も多そうという個人的印象）。~~
=>【2022/11/07追記】leftValがtruthyな値の場合は真と判定されて処理が進んでしまうため誤り。コメント参照
※最近のES2020で策定された仕様なので、バージョンの古いブラウザやnode.jsでは使用できないことがある点に注意です。

まとめ

基本的にif (value == null)~~かプラットフォームの実装が対応していればif (value ?? true)を使う~~のが簡潔にかけてよさそう。
等価演算子「==」を使いたくなかったり、分かりやすさを求める場合は２、３番目の書き方が良さそう。

JavaScriptでは0もnull、undefinedもすべて同じ判定になるけど分ける方法ないの？

TL;DR

1. if (value === undefined || value === null)

2. if (!value && value !== 0)

3. if (value == null)

4. if (value ?? true)

まとめ

JavaScriptでは`0`も`null`、`undefined`もすべて同じ判定になるけど分ける方法ないの？

1. `if (value === undefined || value === null)`

2. `if (!value && value !== 0)`

3. `if (value == null)`

4. `if (value ?? true)`