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

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

JavaScriptのundefined（未定義）は、変数がまだ宣言されていない、あるいは宣言されていても値が代入されていないことを示す特殊な値です。変数の状態を確認したい場面で頻繁に登場するため、初心者の方にとって押さえておきたい重要な概念の一つです。

undefinedの基本的な役割

undefinedは、次のような状況で返される値です。

  • 変数を宣言したものの、まだ値を代入していない場合
  • 存在しないオブジェクトのプロパティにアクセスした場合
  • 関数の引数が渡されなかった場合

以下は、JavaScriptのundefinedを使って、変数が定義済みかどうかを判定する実装例です。

サンプルコード

<!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」ボタンをクリックすると −

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

この例では、変数ageを宣言しているだけで値を代入していないため、age === undefinedの条件がtrueになり、「変数ageはまだ定義されていないか、値が代入されていません」というメッセージが表示されます。

補足：undefinedの判定には「===」を使うのが安全

undefinedかどうかを判定するときは、厳密等価演算子「===」を使用するのが推奨されます。緩い等価演算子「==」を使うと、null == undefinedがtrueになるなど、意図しない挙動を引き起こす可能性があるため注意しましょう。

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

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

  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 でのみ発生するバグとして報告されることも多くあり