JavaScriptでundefined値かどうか判定する方法を解説!

JavaScriptでundefined値かどうか判定する方法をサンプルコード付きで解説していきます。typeof演算子やvoid 0を使った方法など複数紹介します。

コンテンツ [表示]

  1. 1JavaScriptでundefined値かどうか判定したい
  2. 2JavaScriptでundefined値かどうか判定する方法
  3. 2.1typeof演算子を利用する方法
  4. 2.2void 0と比較して判定する
  5. 2.3undefinedを自ら定義する書き方
  6. 2.4【非推奨】if分にそのまま判定を任せる
  7. 2.5【非推奨】nullとの比較で判定させる
  8. 3まとめ

JavaScriptでundefined値かどうか判定したい

JavaScriptで変数がすでに定義されているかチェックをしたい時があります。

JavaScriptでは初期化されていない変数に対してはundefinedという値がセットされています。つまり変数が初期化されているかどうかの判定undefinedかどうかを判定することで行なえます。

一方で変数がundefined値かどうかの判定の仕方は何パターンかあり、この記事ではJavaScriptでundefined値かどうか判定する方法を順番に解説していきます。

Photo byPexels

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 0undefined値と比較を行い判定します。

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 0typeof演算子を使わずにundefinedでそのまま比較が出来るため人によっては分かりやすい形になるかと思います。

【非推奨】if分にそのまま判定を任せる

undefined値をそのままif文の条件式に入れるとfalseが返ってきます。それを利用してundefined値の判定をif文に任せるやり方です。

if文に判定を任せる

var tmp;
if (!tmp) {
  console.log("true");
}else{
  console.log("false");
}

上記の結果もtrueを返します。

ただしこのやり方には注意点があります。今はサンプルコードとしてtmpの正体がわかっていますが、実際に使う時には他の値が入る場合もあります。特にfalse0などが入ってきた時はこのサンプルコードでは同様に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とnullの違いと判定方法を解説!のイメージ
JavaScriptのundefinedとnullの違いと判定方法を解説!
JavaScriptのundefinedとnullという似ているが厳密には異なる両者の違いと判定方法をサンプルコード付きで解説していきます。

まとめ

JavaScriptでundefined値を判定する方法を紹介してきました。数的にはtypeof演算子のやり方が多いですが、jQueryだとundefinedを自ら定義する書き方で書かれていたりとか、プロジェクトによってはバラバラです。

ぜひ一番自身がやりやすいやり方を採用してみて下さい。また会社やプロジェクトですでにルールがある場合はそれに従うようにしましょう。

GeekHive採用サイト

関連記事