※本家はこちらのブログエントリーになります.
毎日 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 は書き換え不可になったのでこの話はなしで.