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

JavaScriptでundefinedを判定する方法を初心者向けに解説する記事のサムネイル画像JS
この記事は約6分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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ではありません');
}

まとめ

本記事では、JavaScriptでundefinedを判定する5つの方法を紹介しました。

それぞれの方法には特徴があり、状況に応じて適切な方法を選ぶことが重要です。

また、関数内でundefinedをチェックする応用例や、オブジェクトのプロパティがundefinedかどうかチェックする方法も紹介しました。

これらの知識を活かして、JavaScriptのundefined判定に自信を持って取り組んでください。