JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのundefinedプロパティとは？変数が未定義かどうかを判定する方法

JavaScriptにおけるundefinedは、変数が宣言されたもののまだ値が代入されていないこと、あるいは変数自体が宣言されていないことを示す特別な値です。undefinedプロパティを活用することで、ある変数に値が設定されているかどうかをプログラム上で簡単に判定できます。

undefinedの基本的な挙動

変数を宣言だけして値を代入しなかった場合、その変数には自動的にundefinedが格納されます。また、存在しないオブジェクトのプロパティへアクセスした場合や、戻り値を持たない関数の実行結果などもundefinedとなります。undefinedかどうかを厳密に比較する際は、等価演算子「===」を使うのが安全です。

サンプルコード

以下は、ボタンをクリックしたときに変数ageが未定義かどうかを判定して結果を表示する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample {
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
</style>
</head>
<body>
<h1>JavaScript undefinedプロパティ</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、変数ageが定義されているかどうかを確認できます
</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let age;
    document.querySelector(".Btn").addEventListener("click", () => {
        if (age === undefined) {
            sampleEle.innerHTML = "変数ageはまだ定義されていないか、値が代入されていません";
        } else
        sampleEle.innerHTML = "変数ageは定義済みで、その値 = " + age;
    });
</script>
</body>
</html>

実行結果

ページを表示した直後の状態は以下のとおりです。

JavaScriptのundefinedプロパティとは？変数が未定義かどうかを判定する方法

「CLICK HERE」ボタンをクリックすると、変数ageには値が代入されていないため、undefinedと判定されて次のように表示されます。

JavaScriptのundefinedプロパティとは？変数が未定義かどうかを判定する方法

まとめ

undefinedは「値がまだ代入されていない」状態を表す重要な概念です。変数の初期化状態をチェックすることで、意図しないエラーを防ぎ、より堅牢なコードを書くことができます。null（意図的に「値なし」を代入した状態）との違いも理解しておくと、JavaScriptのデータの扱いがより明確になります。


  1. JavaScriptの「未宣言（undeclared）」と「未定義（undefined）」の違いとは？

    JavaScriptを学んでいると、「未宣言（undeclared）」と「未定義（undefined）」という一見似たような用語に出会うことがあります。どちらも変数に値が存在しない状態に関係していますが、意味も発生する状況もまったく異なります。本記事では、両者の違いをわかりやすく解説し、実際に動作するサンプルコードもご紹介します。 未宣言（Undeclared）とは？ 未宣言とは、var、let、constのいずれを使っても宣言されていない変数にアクセスしようとしたときに発生する状態です。この場合、JavaScriptはReferenceError（参照エラー）をスローし、プログラムが意図しな

  2. JavaScriptのundefined（未定義）とは？変数の判定方法をサンプルコードで解説

    JavaScriptのundefined（未定義）は、変数がまだ宣言されていない、あるいは宣言されていても値が代入されていないことを示す特殊な値です。変数の状態を確認したい場面で頻繁に登場するため、初心者の方にとって押さえておきたい重要な概念の一つです。 undefinedの基本的な役割 undefinedは、次のような状況で返される値です。 変数を宣言したものの、まだ値を代入していない場合 存在しないオブジェクトのプロパティにアクセスした場合 関数の引数が渡されなかった場合 以下は、JavaScriptのundefinedを使って、変数が定義済みかどうかを判定する実装例です。 サンプルコ