JavaScriptでundefinedの判定をする方法

（最終更新月：2023年11月）

✔当記事はこんな方に向けて作成されました

「Javascriptではどのようにundefinedを判定するのだろう？」

「undefinedのチェック方法を学びたい」

「実際に”undefined”を判断する具体的なコードが見たい」

✔当記事を読むことで得られる知識

Javascriptにおけるundefinedの基本概念
undefinedを判断するための書き方及び応用知識
undefined判定の実用的な例

当記事では、Javascriptでundefinedをどのように判定するかだけでなく、その応用法まで、具体的なコードを示しながら詳細に解説します。

ぜひ最後までご覧ください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/05/15 14:24:16時点 Amazon調べ-詳細)

JavaScriptとundefined入門

JavaScriptでは、変数が宣言されているが値が設定されていない場合、その変数の値はundefinedとなります。

以下がその例です。

let exampleVar;
console.log(exampleVar); // undefined

これは、変数がメモリ上に存在するが、その値がまだ定義されていないことを示しているのです。

初心者の方々はこの点を特に注意し、変数の初期化の重要性を理解することが求められます。

変数とundefined

こちらでは、変数の定義とundefinedの関連性について探求していきます。

変数の扱い方をマスターすることで、意図しない挙動を避ける手助けとなるでしょう。

定義された変数の値とundefinedの関連性
未定義の変数とundefinedの関連性

定義された変数の値とundefinedの関連性

JavaScriptで変数を宣言したのち、値を割り当てれば、その変数はundefinedから新しい値へと変化します。

値を割り当ててみましょう。

let exampleVar; 
console.log(exampleVar); // undefined
exampleVar = 5;
console.log(exampleVar); // 5

変数が明示的に値を持たされていない限り、デフォルトではundefinedとなります。

未定義の変数とundefinedの関連性

変数が宣言されていない場合、その変数名を参照するとエラーが発生します。

typeofにより、宣言されていない変数をundefinedとして扱うことも可能です。

console.log(typeof undeclaredVar); // "undefined"

単純にundeclaredVarを参照するとReferenceErrorが発生してしまうので気をつけましょう。

「undefined」判定方法の探究

こちらでは、「undefined」の正確な判定方法を見ていきましょう。

正確な判定方法を学ぶことで、プログラミング時のエラーを最小限に抑えられます。

undefinedとの比較チェック
“typeof”操作子によるundefined判定
void操作子とundefinedの関係

undefinedとの比較チェック

変数の値がundefinedかどうかを判定する最もシンプルな方法は、変数を直接undefinedと比較する方法です。

let exampleVar;
if (exampleVar === undefined) {
    console.log("The variable is undefined.");
}

この方法は直感的であるため、多くの開発者にとって初めての選択となるでしょう。

“typeof”操作子によるundefined判定

typeof操作子を使用すると、変数の型を調査できます。

undefinedの場合、typeofは"undefined"という文字列を返す決まりです。

let exampleVar;
if (typeof exampleVar === "undefined") {
    console.log("The variable is undefined.");
}

この方法は、変数が宣言されていない場合でもエラーを発生させずにundefinedを返します。

void操作子とundefinedの関係

void操作子は、与えられた式を評価し、undefinedを返します。

これは主に関数やIIFE(Immediately Invoked Function Expression)内で使用されることが多いです。

console.log(void 0); // undefined

void操作子を使用すると、確実にundefinedを得ることができます。

undefined 判定のテクニックと注意点

こちらでは、undefinedの判定テクニックとその際の注意点を深掘りします。

正しい技法の選択と適切な使用方法を知ることで、コードの信頼性と可読性を向上させられるでしょう。

“!”で代用するundefined判定方法
“==null”による代用判定方法
自身でのundefined定義の注意点

“!”で代用するundefined判定方法

JavaScriptでは、undefinedは偽として扱われます。

そのため、!操作子を使用してundefinedの判定も可能。

let exampleVar;
if (!exampleVar) {
    console.log("The variable is undefined or falsy.");
}

ただし、この方法は0、空文字、nullなど他の偽の値も捉えてしまうので注意が必要です。

“==null”による代用判定方法

undefinedは、nullと抽象的に等しく（==）、nullもまた偽として扱われます。

以下のような方法も一般的に用いられます。

let exampleVar;
if (exampleVar == null) {
    console.log("The variable is either undefined or null.");
}

この方法は、変数がundefinedまたはnullの場合に真と評価されます。

自身でのundefined定義の注意点

過去のJavaScriptのバージョンでは、undefinedを再定義できましたが、現在では非推奨です。

これは混乱を招きやすいからです。

let undefined = "new value"; // Bad practice!

現代のJavaScriptではこのような再定義はできませんが、古いスクリプトやライブラリでこのようなパターンを見ることがあるかもしれません。

必補のundefined判定とその例

こちらでは、実際のコード内でのundefined判定方法とその具体的な使用例をご紹介します。

これらの例を通じて、実際の開発時に役立つ技法を身につけることができます。

実践エクササイズとコードのサンプル
コード解説：undefined判定活用法

実践エクササイズとコードのサンプル

以下は、ユーザーからの入力を受け取り、その入力がundefinedかどうかをチェックする簡単な関数の例です。

function checkInput(input) {
    if (typeof input === "undefined") {
        return "Input is undefined!";
    } else {
        return "Input is defined.";
    }
}

let userValue;
console.log(checkInput(userValue)); // Input is undefined!

この関数は、特定の入力値がundefinedであるかどうかを迅速に判定します。