JavaScriptでundefined判定！わかりやすい5つの方法とサンプルコード

はじめに
●JavaScriptでundefinedを判定する方法
●サンプルコード
●注意点
●応用例とサンプルコード
- ○応用例1：関数内でundefinedをチェックする
- ○応用例2：オブジェクトのプロパティがundefinedかどうかチェックする
まとめ

はじめに

JavaScriptを使い始めたばかりの方や、undefinedという言葉が聞き慣れない方もいらっしゃるでしょう。

そんな方々のために、この記事ではJavaScriptでundefinedを判定する方法を5つ紹介します。

この記事を読めば、JavaScriptのundefined判定ができるようになります。

それではさっそく、JavaScriptでundefinedを判定する方法について見ていきましょう。

●JavaScriptでundefinedを判定する方法

○方法1：typeof演算子を使う

undefinedを判定する最もシンプルな方法は、typeof演算子を使うことです。

この方法では、変数の型を判定して、その型が’undefined’かどうかをチェックします。

○方法2：厳密等価演算子(===)を使う

undefinedを判定する別の方法は、厳密等価演算子(===)を使って比較することです。

この方法では、変数がundefinedと厳密に等しいかどうかをチェックします。

○方法3：非厳密等価演算子(==)を使う

undefinedを判定する方法の一つとして、非厳密等価演算子(==)を使うこともできます。

この方法では、変数がundefinedと等価かどうかをチェックします。

ただし、非厳密等価演算子は、nullとundefinedを同じものとして扱うため、注意が必要です。

○方法4：void演算子を使う

undefinedを判定する方法として、void演算子を使うこともできます。

void演算子は、与えられた式を評価した後、undefinedを返します。

この方法では、void 0と比較してundefinedかどうかをチェックします。

○方法5：関数パラメータのデフォルト値を利用する

最後に、関数のパラメータにデフォルト値を設定して、引数がundefinedかどうかを判定する方法があります。

この方法では、引数がundefinedの場合、デフォルト値が使用されます。

●サンプルコード

○サンプルコード1：typeof演算子を使った判定

このコードでは、typeof演算子を使って変数がundefinedかどうかを判定する方法を紹介しています。

この例では、変数aが未定義のため、判定結果はtrueになります。

let a;
if (typeof a === 'undefined') {
  console.log('aはundefinedです');
}

○サンプルコード2：厳密等価演算子を使った判定

このコードでは、厳密等価演算子(===)を使って変数がundefinedかどうかを判定する方法を紹介しています。

この例では、変数aが未定義のため、判定結果はtrueになります。

let a;
if (a === undefined) {
  console.log('aはundefinedです');
}

○サンプルコード3：非厳密等価演算子を使った判定

このコードでは、非厳密等価演算子(==)を使って変数がundefinedかどうかを判定する方法を紹介しています。

この例では、変数aが未定義のため、判定結果はtrueになります。ただし、非厳密等価演算子はnullとundefinedを同じものとして扱うため、注意が必要です。

let a;
if (a == undefined) {
  console.log('aはundefinedです');
}

○サンプルコード4：void演算子を使った判定

このコードでは、void演算子を使って変数がundefinedかどうかを判定する方法を紹介しています。

この例では、変数aが未定義のため、判定結果はtrueになります。

let a;
if (a === void 0) {
  console.log('aはundefinedです');
}

○サンプルコード5：関数パラメータのデフォルト値を利用した判定

このコードでは、関数のパラメータにデフォルト値を設定し、引数がundefinedかどうかを判定する方法を紹介しています。

この例では、関数testの引数aがundefinedの場合、デフォルト値の’Missing argument’が使用されます。

function test(a = 'Missing argument') {
  console.log(a);
}

test(); // "Missing argument"が表示される

●注意点

非厳密等価演算子(==)を使った判定では、nullとundefinedが同じものとして扱われるため、注意が必要です。

厳密な判定が求められる場合は、厳密等価演算子(===)やtypeof演算子など、他の方法を検討してください。

●応用例とサンプルコード

○応用例1：関数内でundefinedをチェックする

関数内で引数がundefinedかどうかをチェックする場合も、上記の方法を応用できます。

例えば、関数内でtypeof演算子を使ってundefinedをチェックする方法は以下のようになります。

function checkUndefined(a) {
  if (typeof a === 'undefined') {
    console.log('引数aはundefinedです');
  } else {
    console.log('引数aはundefinedではありません');
  }
}

let b;
checkUndefined(b); // "引数aはundefinedです"が表示される

○応用例2：オブジェクトのプロパティがundefinedかどうかチェックする

オブジェクトのプロパティがundefinedかどうかをチェックする場合も、先ほど紹介した方法が適用できます。

オブジェクトのプロパティがundefinedかどうかを厳密等価演算子(===)を使ってチェックする例を紹介します。

let obj = {
  a: 'foo',
  b: undefined,
};

if (obj.b === undefined) {
  console.log('プロパティbはundefinedです');
} else {
  console.log('プロパティbはundefinedではありません');
}