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

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

JavaScriptを学んでいると、「未宣言（undeclared）」と「未定義（undefined）」という一見似たような用語に出会うことがあります。どちらも変数に値が存在しない状態に関係していますが、意味も発生する状況もまったく異なります。本記事では、両者の違いをわかりやすく解説し、実際に動作するサンプルコードもご紹介します。

未宣言（Undeclared）とは？

未宣言とは、var、let、constのいずれを使っても宣言されていない変数にアクセスしようとしたときに発生する状態です。この場合、JavaScriptはReferenceError（参照エラー）をスローし、プログラムが意図しない動作をする原因になります。

未定義（Undefined）とは？

未定義とは、var、let、constを使って変数は宣言されているものの、まだ値が代入されていない状態を指します。この場合はエラーにはならず、変数の値としてundefinedが返されます。

違いのまとめ

  • 未宣言：宣言されていない変数にアクセス → ReferenceErrorが発生
  • 未定義：宣言済みだが値が未代入 → undefinedが返される

サンプルコード

以下は、未宣言と未定義の変数にアクセスしたときの挙動を確認できるHTML＋JavaScriptのコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>未宣言 vs 未定義</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>未宣言 vs 未定義</h1>
<div class="result"></div>
<div class="result"></div>
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックすると、未定義・未宣言の変数にアクセスできます</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelectorAll(".result");
    let a;
    BtnEle.addEventListener("click", () => {
        resEle[0].innerHTML += "未定義変数へのアクセス結果 = " + a;
        try {
            resEle[1].innerHTML = b;
        } catch (err) {
            resEle[1].innerHTML = "未宣言変数へのアクセス結果 = " + err;
        }
    });
</script>
</body>
</html>

実行結果

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

「ここをクリック」ボタンを押すと、次のように結果が表示されます。

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

このように、値を代入せずに宣言しただけの変数aはundefinedとして参照できる一方、宣言自体が存在しない変数bにアクセスするとReferenceErrorが発生することが確認できます。エラーを防ぐためにも、変数は必ずvar、let、constで宣言してから使う習慣を身につけましょう。

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

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

  2. JavaScriptのTypeError：「'undefined' is not an object」エラーの原因と対処法

    「TypeError: undefined is not an object」というエラーは、値が undefined（未定義）のオブジェクトに対して、プロパティへのアクセスやメソッドの呼び出しを行った場合に発生します。 このエラーメッセージが表示されるのは Safari ブラウザのみという点に注意が必要です。Chrome や Firefox などのブラウザでは、同じ状況でも「Cannot read properties of undefined (reading xxx)」のような、少し異なる文言でエラーが出力されます。そのため、Safari でのみ発生するバグとして報告されることも多くあり