JavaScriptやjQueryでの変数が「空かどうか」のチェック方法

javascriptを使って、htmlのDOMを取得してhtmlを操作するということはよくやると思いますが、もしDOMが取れなかった場合(取りたい対象のhtmlがなかった場合など)にそのまま処理を進めようとするとエラーになる可能性があります。

エラーになってしまうとそのあとのjsの処理が止まるので、他の処理に影響が出ます。

なので、必ず「空かどうか」「中身が入っているかどうか」というチェックをする必要があります。

そのチェック方法をご紹介します。

nullとundefinedの違い

まず、空かどうかを調べる前にnullとundefinedの違いについて知っておきましょう。

javascriptにはnullundefinedという特殊な値があります。

nullとは存在しないものの値です。

unndefinedとは定義されていないものの値です。

nullはphpなど他の言語にもあるものですが、undefinedはjs特有の値です。

似たようなものかと思いますが、以下のように探した結果が存在しない場合は「null」となり、探しもしていない未定義の場合は「undefined」となります。

 

また以下のように、存在しないプロパティを参照した場合も「undefined」となります。

 

なので、「null」とは結果として存在しない場合の値。「undefined」とは定義すらされていない場合の値ということです。

ただ変数を定義しただけだと中身にはundefinedが入り、ありもしないDOMを取得しようとするとnullが入るってことですね。

各値のtrue/false

nullとundefinedの違いがわかったところで、それぞれ色々な値がif文で判定した場合にtrue/falseどちらになるのかを見てみます。

 

結果をまとめるとこんな感じ。

null false
undefined false
オブジェクト true
0 false
1 ture
-1 true
空文字 false
文字(任意の1文字以上) true

なので、「null」「undefined」の存在チェックを行う場合は、下のようにそのまま変数やオブジェクトをif文の中に入れてやればチェックが出来ます。

jQueryの存在チェック

jQueryは、javascriptと違い単純にオブジェクトのチェックを行っても存在チェックが出来ません。

このように存在しないIDを参照しても「$ele」は存在すると判定されちゃいます。

jQueryではたとえ、参照したIDやclassが無くてもjQueryオブジェクトが作成されるためチェックが出来ません。

なので、jQueryのチェックを行うときは要素の数を調べる「length」「size()」を使用するか、「$ele[0]」で要素そのものにアクセスしnull/undefinedを調べる必要があります。

複数のチェック方法がありますが、null/undefinedのチェックでもある「$ele[0]」が最も適切です

「$ele[0]」ならば、チェック方法がjavascriptのチェックと同じなので、js/jQuery間での同一のチェックが出来る上、各チェックの中では最も実行速度が速いチェック方法だからです。

参考:[JS][jQuery] 要素の存在を確認する6通りのコードと実行速度