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] 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 は書き換え不可になったのでこの話はなしで.

phi
Game Programmer. phina.js 作ってます♪
http://phiary.me
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