Web’Notes

javascriptとjQueryの存在チェックの方法

javascript/jQueryのチェック方法はいくつかあります。

いろいろな方法でチェックできるため、どういう方法でチェックすれば最も簡単で確実なのかがいまいち不明だったのでチェック方法を調査してみました。。また、nullやundefinedの違いなど曖昧になっていることも一緒に調査したのでご紹介します。

1. nullとundefinedの違い
2. 各値のtrue/false
3. jQueryの存在チェック

nullとundefinedの違い

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

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

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

var ele = document.getElementById('ele'); // 存在しないID
var func; // 未定義

if(ele === null)        console.log("ele = null");
if(ele === undefined)   console.log("ele = undefined");
// ele = null

if(func === null)       console.log("func = null");
if(func === undefined)  console.log("func = undefined");
// func = undefined

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

if(Math.test === null)      console.log("Math.test = null");
if(Math.test === undefined) console.log("Math.test = undefined");
// Math.test = undefined

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

各値のtrue/false

if文で比較をした場合の各値のtrue/falseは以下のようになります。

// null値のチェック
if(null) console.log("if(null)=true");
if(!null) console.log("if(null)=false");
// if(null)=false

// undefinedのチェック
if(undefined) console.log("if(undefined)=true");
if(!undefined) console.log("if(undefined)=false");
// if(undefined)=false

// Math.abs(オブジェクト)のチェック
if(Math.abs) console.log("Math.abs=true");
if(!Math.abs) console.log("Math.abs=false");
// Math.abs=true

// 数字(0)のチェック
if(0) console.log("0=true");
if(!0) console.log("0=false");
// 0=false

// 数字(1)のチェック
if(1) console.log("1=true");
if(!1) console.log("1=false");
// 1=true

// 数字(-1)のチェック
if(-1) console.log("-1=true");
if(!-1) console.log("-1=false");
// -1=true

// 文字(空文字)のチェック
if('') console.log("''=true");
if(!'') console.log("''=false");
// ''=false

// 文字(空白)のチェック
if(' ') console.log("' '=true");
if(!' ') console.log("' '=false");
// ' '=true

// 文字(空白以外)のチェック
if('a') console.log("'a'=true");
if(!'a') console.log("'a'=false");
// 'a'=true

結果をまとめるとこのようになります。

この結果から「null」「undefined」の存在チェックを行う場合は、そのまま変数/オブジェクトをif文の中に入れてやればチェックが出来ることがわかります。

if(変数/オブジェクト){
   // 存在する場合の処理
}
else{
   // 存在しない場合の処理
} 

jQueryの存在チェック

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

var $ele = $('#ele'); // 存在しないID

if($ele) console.log("$ele = true");
if(!$ele) console.log("$ele = false");
// $ele = true

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

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

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

// 要素数のチェック
if($ele.length) console.log("$ele.length != 0");
if(!$ele.length) console.log("$ele.length = 0");
// $ele.length = 0

// 要素数のチェック
if($ele.size()) console.log("$ele.size() != 0");
if(!$ele.size()) console.log("$ele.size() = 0");
// $ele.size() = 0

// 要素がnull/undefinedかチェック
if($ele[0]) console.log("$ele[0] != null/undefined");
if(!$ele[0]) console.log("$ele[0] = null/undefined");
// $ele[0] = null/undefined

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

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

JavaScript javascript, jQuery