JavaScriptでは0もnull、undefinedもすべて同じ判定になるけど分ける方法ないの？
タイトルの通り、こんな場合どうするか。if (!value)と書いてしまうと、全部trueになってしまう。
0だけfalse判定にしたいケースがあったので調べてみた。
[JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定についてに大体書いてあるが、このトピックの部分だけまとめてみた。
1. if (!value)
まず初めにこれを使っていたのだが、JSでは0はfalse判定なので普通に間違い。
勘違いして使っていたらバグの元になってしまう。
2. if (value === undefined || value === null)
これならOKだが、どこか野暮ったい。
この書き方が最も明示的で誰にもわかりやすいと思うが、もっとシンプルに書きたい場合もあるだろう。
3. if (!value && value !== 0)
2番目の書き方よりは短くなったが、少し分かりづらくなった気がする。
4. if (value == null)
この書き方だとvalueの値が0の時はfalse判定になる。厳密等価演算子ではなく等価演算子「==」を使っているため、valueの値がnullとundefinedの時は同様にtrueとして判定されるようだ。２、３番目の書き方よりも簡潔な条件式になった。
厳密には次のようなカラクリらしい。
等価演算子は、2 つのオペランドが同じ型でないならばオペランドを変換して、それから厳密な比較を行います。両方のオペランドがオブジェクトならば、 JavaScript は内部参照を比較するので、オペランドがメモリ内の同じオブジェクトを参照するときに等しくなります。
ということで、if (value == undefined)でも同じ結果となるが、文字数的にはnullの方が簡潔になる。
否定の時はif (value != null)でOK。（valueがnullとundefined以外の時にtrue判定となる）
ESLintで引っかからないか気になったが、大丈夫だった（設定によっては指摘されるかも？）。
5. if (value ?? true)
【2020/07/04追記】
コメントでNull合体演算子というのを教えてもらった。これを使うと、nullとundefinedの時は右の値を返して、それ以外のとき（0も空文字も）は左の値を返してくれるそう。
// `leftVal`が`null`と`undefined`の時だけ`rightVal`を返す
if (leftVal ?? rightVal)
等価演算子を使わなくてもいいので、これが一番きれいに書けそう（だが知らない人も多そうという個人的印象）。
※最近のES2020で策定された仕様なので、バージョンの古いブラウザやnode.jsでは使用できないことがある点に注意です。
まとめ
- 基本的に
if (value == null)かプラットフォームの実装が対応していればif (value ?? true)を使うのが簡潔にかけてよさそう。 - 等価演算子「
==」を使いたくなかったり、分かりやすさを求める場合は２、３番目の書き方が良さそう。