【JavaScript入門】undefinedとnull

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

undefinedとnull

　JavaScript には、値が「存在しない」あるいは「まだ決まっていない」ときに使われる特別な値があります。それが undefined と null です。これらはエラーではなく、あくまでも「定義されていない状態」「無効な状態」を明示するための言語仕様です。ここでは、undefined と null の役割や使われる状況を簡単に紹介します。

１．undefined

　変数宣言を行ったものの、まだ値が代入されていない変数に入っているのが undefined です。また、JavaScript の配列やオブジェクト、関数などでも、存在しない要素を参照したときや引数が省略されたとき、戻り値が指定されなかったときなどに undefined が発生することがあります。

２．null

　null は「何も値がない」「無効である」という状態を意図的に示すために使われる特別な値です。例えば、関数で検索結果が見つからなかったときに明示的に null を返すケースなどがあります。JavaScript 内部では null は object 型に分類されますが、これは言語仕様上の古い設計によるものであり、現在では「空の値」として扱われる特別な値という認識が一般的です。

３．テーブルで見る `undefined` と `null`

値	型	意味・使われる状況
undefined	undefined	変数宣言後に値が未代入・オブジェクトの存在しないプロパティ・戻り値なし。
null	object	意図的に「値が無い」状態を表す・検索結果が見つからない場合など。

４．サンプルHTMLとJavaScript

　次のサンプルを「myUndefinedNullSample.html」として保存し、ブラウザで開いてコンソール（開発者ツール）を確認してください。

【myUndefinedNullSample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myUndefinedNullSample.html</title>
</head>
<body>
  <h1>undefined と null の例</h1>
  <p>ブラウザの開発者ツールを開き、コンソールを確認してください。</p>

  <script>
    // 1. 変数宣言のみ → undefined
    let fruit;
    console.log("宣言だけした変数 fruit:", fruit);

    // 2. オブジェクトの存在しないプロパティ → undefined
    let obj = { name: "イチゴ" };
    console.log("オブジェクトに存在しないプロパティ:", obj.color); // undefined

    // 3. 関数の引数を省略 → undefined
    function showValue(value) {
      console.log("引数の値:", value);
    }
    showValue();

    // 4. 戻り値を指定しない → 関数の呼び出し結果が undefined
    function doNothing() {}
    let result = doNothing();
    console.log("戻り値を指定しない関数の結果:", result);

    // 5. null を代入
    let user = null;
    console.log("意図的に null を代入した変数 user:", user);

    // 6. 関数で検索結果が見つからなかった場合に null を返す例
    function findColor(colorName) {
      const colors = ["赤", "青", "黄"];
      if (colors.includes(colorName)) {
        return colorName;
      } else {
        return null; // 見つからなかった場合
      }
    }
    console.log("検索結果(存在する):", findColor("赤"));  // 赤
    console.log("検索結果(存在しない):", findColor("緑")); // null
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

宣言だけした変数 fruit: undefined
オブジェクトに存在しないプロパティ: undefined
引数の値: undefined
戻り値を指定しない関数の結果: undefined
意図的に null を代入した変数 user: null
検索結果(存在する): 赤
検索結果(存在しない): null

まとめ

undefined：値がまだ代入されていない、もしくは存在しないことを示すときに自動的に使われる。
null ：あえて「何もない状態」を表すために使われる特別な値。

　このように、JavaScript では「未定義の状態（undefined）」と「意図的な空（null）」を区別して扱います。両者を正しく理解し使い分けることで、処理の意図をより明確に示せるようになります。

【JavaScript入門】undefinedとnull