Help us understand the problem. What is going on with this article?

[JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定について

More than 3 years have passed since last update.

※本家はこちらのブログエントリーになります.
毎日 html, css, js についてのエントリーを公開しているのでよかったらRSS登録してください♪




null とか undefined とか 0 とか 空文字('') とか false とかの
判定について書いてみました.

js-logo.png

各型, 値の評価

各型, 値が条件式でどう評価されるのかを見てみましょう.

value type result
{} オブジェクト true
"hoge" 文字列 true
"" 文字 false
1 数値 true
-1 数値 true
0 数値 false
[] 配列 true
true 真偽値 true
false 真偽値 false
undefined undefined false
null null false

!hoge による判定

下記のようなコードってよく使いますよね?

if (!hoge) { ... }

この条件が true になるのは上の表から分かるように
null, undefined, 0, 空文字(''), false になります.

おそらくこういった処理を使う場面は

  • プロパティの存在チェックだったり
  • 引数の省略チェックに使ったり

って場面だと思います.

ここで注意点が!!
数値を受け取るかどうかに気をつけてください.

何故なら 0 の場合も true になっちゃうので 0 を渡した時に
意図しない挙動をする可能性があるからです.

引数が 0 のときにぶち当たる問題例

私が実際に体験した例です.

var fillStar = function(x, y, radius, sides, angle) {
    var angle = angle || 90;
};

このコードは angle という引数を受け取ります.
一見問題なさそうですが angle に 0 を渡した際に問題が起きます.

0 を渡すと angle || 90 の angle の部分で false と判定されてしまい
90 がセットされます.

つまりこの関数は angle に 0 をセットすることができなくなってしまっています.
これのタチの悪いところは 0 を渡した時だけこの問題が起きるので発見しづらいということです.

対策としては, こういった場合はちゃんと undefined と判定することで解決できます.

var angle = (angle !== undefined) ? angle : 90;

省略して書くのは便利で気持ち良いですが,
しっかりと何と判定しているのかは意識するようにしましょう.

hoge != null による判定

null と undefined のときのみ判定したい場合は
下記のコードでいけます.

if (value == null) {
    ... 
}

存在チェックとかはこっちのほうが安全ですね.

undefined という問題児

undefined 書き換えると上の話全部崩れるよー
だからちゃんと undefined 判定するときは

if(typeof(hoge) == "undefined") { ... }

って書こうねって話をしようと思ったのですが,
ECMAScript 5 で undefined は書き換え不可になったのでこの話はなしで.

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした