Edited at

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

More than 3 years have passed since last update.

※本家はこちらのブログエントリーになります.

毎日 html, css, js についてのエントリーを公開しているのでよかったらRSS登録してください♪





null とか undefined とか 0 とか 空文字('') とか false とかの

判定について書いてみました.


各型, 値の評価

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

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