JavaScriptでundefined値かどうか判定する方法を解説！
JavaScriptでundefined値かどうか判定する方法をサンプルコード付きで解説していきます。typeof演算子やvoid 0を使った方法など複数紹介します。
JavaScriptでundefined値かどうか判定したい
JavaScriptで変数がすでに定義されているかチェックをしたい時があります。
JavaScriptでは初期化されていない変数に対してはundefinedという値がセットされています。つまり変数が初期化されているかどうかの判定はundefinedかどうかを判定することで行なえます。
一方で変数がundefined値かどうかの判定の仕方は何パターンかあり、この記事ではJavaScriptでundefined値かどうか判定する方法を順番に解説していきます。
JavaScriptでundefined値かどうか判定する方法
JavaScriptでundefined値かどうか判定する方法ですが、いくつかやり方があります。順番に紹介していきますので、ぜひやりやすいやり方を採用してみて下さい。
typeof演算子を利用する方法
対象となるデータ型を表すtypeof演算子を使ってundefined値かどうかの判定をします。
typeof演算子を利用したundefined値の判定
if( typeof tmp === 'undefined'){
console.log("true");
}else{
console.log("false");
}上記コードの結果はtrueとなります。tmpは未定義で、typeof tmpは文字列のundefinedを返します。またこの後の例とは違いtmpが未登場の場合でもtypeof演算子を使うとエラーにならずに処理が続きます。（存在チェックとしても使えます）
このようにtypeof演算子を利用すればundefined値の判定が行なえます。
void 0と比較して判定する
void 0はJavaScriptではundefinedを返します。（0以外でもundefinedが返りますが）
この性質を利用して、void 0とundefined値と比較を行い判定します。
if文にそのまま判定をさせる
var tmp;
if (tmp === void 0) {
console.log("true");
}else{
console.log("false");
}上記の結果はtrueが返ります。
undefinedを自ら定義する書き方
undefinedは予約後ではないため、そのまま使うことはできませんが、下記のように即時関数の引数に持ってくることで定義されている状態で判定に利用出来ます。
undefinedを自ら定義する書き方
(function(undefined){
var tmp;
if (tmp === undefined) {
console.log("true");
}else{
console.log("false");
}
})();上記の結果もtrueとなります。void 0やtypeof演算子を使わずにundefinedでそのまま比較が出来るため人によっては分かりやすい形になるかと思います。
【非推奨】if分にそのまま判定を任せる
undefined値をそのままif文の条件式に入れるとfalseが返ってきます。それを利用してundefined値の判定をif文に任せるやり方です。
if文に判定を任せる
var tmp;
if (!tmp) {
console.log("true");
}else{
console.log("false");
}上記の結果もtrueを返します。
ただしこのやり方には注意点があります。今はサンプルコードとしてtmpの正体がわかっていますが、実際に使う時には他の値が入る場合もあります。特にfalseや0などが入ってきた時はこのサンプルコードでは同様にtrueを返します。
つまり厳密なundefined値の判定ではないので注意しましょう。
【非推奨】nullとの比較で判定させる
次にJavaScriptのnullとの比較でundefined値を判定する方法です。厳密にはundefined値とnullは異なりますが、厳密ではない比較の==を使うことでundefined値を判定出来ます。
nullとの比較で判定させる
var tmp;
if (tmp == null) {
console.log("true");
}else{
console.log("false");
}上記の結果はtrueになります。ただし==を===と3つにすると厳密な比較となり、falseになります。
コーディングの規約で==を禁止しているところや、厳密に判定したい方にとっては非推奨のやり方です。
またundefinedとnullの違いがいまいち理解できない方はぜひ下記を参考にしてみましょう。
まとめ
JavaScriptでundefined値を判定する方法を紹介してきました。数的にはtypeof演算子のやり方が多いですが、jQueryだとundefinedを自ら定義する書き方で書かれていたりとか、プロジェクトによってはバラバラです。
ぜひ一番自身がやりやすいやり方を採用してみて下さい。また会社やプロジェクトですでにルールがある場合はそれに従うようにしましょう。
