Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【JavaScript】条件式で0とnull/undefinedの判定を分ける

JavaScriptでは0nullundefinedもすべて同じ判定になるけど分ける方法ないの?

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

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

1. if (!value)

まず初めにこれを使っていたのだが、JSでは0false判定なので普通に間違い

勘違いして使っていたらバグの元になってしまう。

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

これならOKだが、どこか野暮ったい。

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

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

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

4. if (value == null)

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

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

比較演算子 - JavaScript | MDN

等価演算子は、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)を使うのが簡潔にかけてよさそう。
  • 等価演算子「==」を使いたくなかったり、分かりやすさを求める場合は2、3番目の書き方が良さそう。
_masa_u
都内のスタートアップで働くプログラマーです。 仕事で学んだことを中心に備忘録として記事を書いています。 それ以外に海外の技術ブログの記事を邦訳したり、@baby-degu のメンバーの一員として記事選定や翻訳などのお手伝いをしています。
https://www.wantedly.com/users/42256816
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away