【JavaScript】undefined判定とは？サンプルコードつきで初心者向けにわかりやすく解説

フロントエンド開発•
JavaScript

はじめに

JavaScriptで開発を進めていると、undefined という値に遭遇することがよくあります。
たとえば、変数を宣言したのに値を代入していない場合や、オブジェクトに存在しないプロパティを参照したときなどに現れることがあります。

しかし、初心者にとっては「undefinedとは何だろう？」と疑問に感じるかもしれません。
そこでこの記事では、undefinedの正体と判定方法についてわかりやすく説明します。

実務では、undefinedを正しく扱えないと想定外のエラーやバグにつながります。
この機会にしっかりと理解しておくと安心でしょう。

この記事を読むとわかること

  • undefinedの基本的な意味
  • undefinedが発生するシーンと仕組み
  • 具体的な判定方法とコード例
  • 実務で役立つ活用シーンとよくあるエラー例
  • undefinedを回避するための工夫

JavaScriptにおけるundefinedとは

JavaScriptにはいくつかのプリミティブ型がありますが、そのうちの一つがundefinedです。
ざっくり言えば「値が設定されていない」状態を示す特殊なものです。

JavaScriptの内部では、変数を宣言だけして値を代入していないと、自動的にundefinedが割り当てられます。
このため「まだ何も決まっていない変数」によく付く印象がありますが、実際にはそれ以外にもいろいろなシーンで現れる可能性があります。

undefinedの意味合い

undefined は日本語で「定義されていない」という感じです。
ですから「値が用意されていない」「プロパティが存在しない」といった意味合いで登場することが多いです。

一方でJavaScriptにはnullというもう一つの似たような概念があります。
ただし、nullは「空の値を意図的に代入している」という意味があるのに対し、undefinedは「まだ値がない、あるいは自動的に割り当てられた空っぽの状態」です。

特徴的なポイント

undefinedは次のような特徴があります。

  • typeof演算子を使うと "undefined" が返ってくる
  • 「厳密等価演算子」で判定するときは === undefined と書く
  • 暗黙的な型変換がからむときに混乱が生じやすい

意図しないundefinedが発生してしまうと、コードのロジックが崩れてエラーが起きることもあります。
そのため、どのように判断してどう対処するかをきちんと把握することが大切です。

undefinedが発生するシーン

undefinedは「値が定義されていない」状態であるため、さまざまなケースで姿を表します。
ここでは主なシーンを紹介します。

変数宣言後に値を代入しない

最もよくあるケースがこれです。
たとえば下記のように変数だけ宣言した場合、値の初期化が行われず、自動的にundefinedが入ります。

let example;
console.log(example); // ここでundefinedが出力される

この状態で、いきなりexampleを使って計算しようとするとエラーが起きることがあります。
まずは値をセットしてから使うのが基本です。

関数の戻り値が指定されていない

JavaScriptの関数で戻り値（return）を指定しなかった場合にもundefinedになります。
以下の例を見てみましょう。

function doNothing() {
  // return文がない
}
const result = doNothing();
console.log(result); // undefined

意図せずにreturnを書き忘れてしまうと、結果としてundefinedを受け取ることになります。
このまま値を参照してしまうと意図しない動作を引き起こす恐れがあります。

オブジェクトのプロパティが存在しない

オブジェクトにアクセスするとき、存在しないプロパティを取り出すとundefinedが返ります。
たとえば下記のような例です。

const user = {
  name: "Alice",
  age: 25
};
console.log(user.email); // undefined

ここで user.email には何も定義されていないため、undefinedが返ってきます。
この挙動を想定していないと、次の操作でエラーが出る可能性があります。

配列の要素が存在しないインデックスを参照

JavaScriptの配列では、長さを超えたインデックスを参照するとundefinedになります。
以下のようなコードが典型例です。

const fruits = ["Apple", "Banana"];
console.log(fruits[2]); // undefined

誤って存在しないインデックスにアクセスしていてもエラーにはならず、単にundefinedが返ります。
そのため、不具合の発見が遅れてしまうこともあるので注意が必要です。

undefinedの判定方法

undefinedを正しく判定するには、いくつかの方法があります。
ここでは代表的な手段を見てみましょう。

typeof演算子

typeof は、値のデータ型を文字列として返す演算子です。
undefinedを判定するときは下記のように書きます。

let x;
if (typeof x === "undefined") {
  console.log("xはundefinedです");
}

この場合、xには何も代入されていないため、typeof x は "undefined" を返します。
文字列比較なので、誤って変数が未宣言の場合にも落ちないよう注意が必要です。

厳密等価演算子（===）

JavaScriptには等価演算子（==）と厳密等価演算子（===）がありますが、undefinedの判定には===を使うのが一般的です。
以下のように記述します。

let y;
if (y === undefined) {
  console.log("yはundefinedです");
}

こちらはtypeof演算子とは異なり、未宣言の変数を参照するとエラーが出てしまうので、その点は注意しましょう。
しかし、「変数の値が本当にundefinedであるか」を明確に示したい場合は適している方法です。

if文を使う場合

if 文の条件に変数をそのまま置くと、falseやundefinedなどの「偽」と評価される値はすべてfalse扱いになります。
ただし、この方法はnullや空文字列（""）、数字の0などもまとめてfalseになるので厳密なチェックには向いていません。

let z;
if (!z) {
  console.log("zはundefinedやnullなどのfalsy値です");
}

undefinedだけを明示的に判定したいなら、=== undefined を使ったほうが混乱が少ないでしょう。
一方で、何か値が存在すればOK、なければNGとまとめて判定したいケースでは役立ちます。

optional chainingとの組み合わせ

オブジェクトや配列のプロパティを深く参照する場合、 optional chaining (?.) を使うと安全にアクセスできます。
存在しない場合はundefinedが返ってくるので、そこをさらに判定すればいいわけです。

const userProfile = {};
const email = userProfile?.contact?.email;
if (email === undefined) {
  console.log("emailは存在しません");
}

エラーを発生させることなく「途中のプロパティがなければundefinedを返す」ので便利です。
複雑な構造を扱うときに覚えておくと安心です。

undefinedとnullの違い

JavaScriptにはundefinedのほかにnullという値も存在します。
両者は「値がない」という意味合いで似ていますが、使い分ける意図が違う場合があります。

JavaScriptの歴史的経緯

言語の初期設計で、nullは「空の値」を明示的に代入するためのものとして用意されました。
一方、undefinedは「まだ定義されていない」ことを示すために自動的に付与されるもので、始まりから役割がやや異なります。

値の有無と意図的な空

null は開発者が「この変数には何も値を設定しない」と明示的に代入するケースで用いられます。
たとえば、処理の途中で「ここにはあえて何も入れない状態を置く」といった設計が可能です。

一方のundefined は「まだ何も設定されていない」「これから値を入れる予定」というニュアンスが強いです。
どちらも実行すると「値がない」ことを意味しますが、意図的か自然発生的かで区別することが多いでしょう。

実務での活用シーン

undefinedの判定方法を知っていると、実務のさまざまな場面で役立ちます。
ここからは具体的にどのように使えるかイメージしてみましょう。

フォーム入力チェック

Webアプリでフォームを受け取るとき、ユーザーが入力を忘れている項目を判定したい場面があります。
想定外のデータ型が来る場合もあるので、その項目自体がundefinedかどうかを確認すると堅牢な実装がしやすくなります。

function validateForm(inputData) {
  if (inputData.name === undefined) {
    // 名前が入力されていないケース
    console.log("名前が入力されていません");
  }
}

こうすることで、プロパティそのものが存在しない状態を明確にキャッチできます。
そのまま処理を続行してしまうとエラーが出るかもしれませんし、予期せぬ結果を招く可能性もあるでしょう。

APIレスポンスのチェック

外部のAPIを叩いてデータを取得するときに、レスポンス内のデータが存在しない場合はundefinedになることがあります。
次のように安全にundefinedを検知して、エラー処理や代替処理を入れるとバグを防ぎやすくなります。

fetch("https://example.com/api/data")
  .then(response => response.json())
  .then(data => {
    if (data.result === undefined) {
      console.log("データが存在しません");
      return;
    }
    // resultがある場合の処理
  });

このチェックを怠ると後の処理でプロパティを参照し、エラーを起こす可能性があります。
たとえば data.result.id を取得しようとしても、resultがundefinedならエラーです。

よくあるトラブルシューティング

undefined自体はJavaScriptの正常な仕様ですが、予想外のタイミングで出てしまうとエラーを招くことがあります。
そのなかでもとくに多いのがプロパティアクセス時のエラーです。

TypeError: Cannot read property of undefined

このエラーは「undefinedからさらにプロパティを参照しようとした」ときに出るものです。
以下の例のように、user.addressがundefinedの場合に user.address.city を読み込もうとすると発生します。

const user = { name: "Bob" };
console.log(user.address.city); // ここでエラー発生

このような事態を防ぐには、optional chaining を使ったり、if文で事前にaddressがundefinedではないことを確認したりするといいでしょう。
要するに「値がないかもしれない」ケースを常に意識してコードを書くことが大切です。

undefinedを避ける工夫

なるべくundefinedが現れないように設計することで、意図せずエラーが発生するリスクを減らせます。
ここではいくつかのテクニックを紹介します。

defaultパラメータ

関数の引数にデフォルト値を指定すると、呼び出し元で値が未設定だったときにundefinedを回避できます。
たとえば以下のように書くと、引数を省略しても初期値がセットされます。

function greet(name = "ゲスト") {
  console.log(`こんにちは、${name}さん`);
}
greet(); // こんにちは、ゲストさん

この機能を上手に使うと、「呼び出し側が値を渡さなかった場合の処理」をシンプルに書けます。
undefined判定の分岐を毎回書かなくて済むメリットがあります。

??演算子 (Nullish Coalescing Operator)

??演算子は、左側の値がnullまたはundefinedだった場合に右側の値を返すという演算子です。
ふつうに || 演算子を使って代入すると、0や空文字でも代替値に上書きされてしまう可能性があるので、??演算子の方が意図に合う場合が多いです。

const inputValue = undefined;
const finalValue = inputValue ?? "デフォルト";
console.log(finalValue); // デフォルト

nullとundefinedをまとめて扱いたいケースはよくあるので、ぜひ覚えておきたい記法です。
これもES2020以降で使える機能として定められています。

optional chaining演算子

さきほども少し触れましたが、optional chainingを使うことでundefinedのプロパティアクセスがエラーを起こすのを回避できます。
深いネストがある場合、オブジェクトごとにif文を書かなくてすむのが利点です。

const user = {};
const city = user.address?.city;
console.log(city); // undefined （エラーは起きない）

これにより「addressプロパティがなければundefinedを返す」という処理になります。
実務で複雑なデータを扱うときには必ずと言っていいほど活用される記法です。

undefinedをエラーの原因として扱うよりも、「実装の上で想定可能な状態」と受け止めるのがポイントです。

まとめ

今回はJavaScriptにおけるundefined の判定方法や活用シーンについて、具体例を交えて解説しました。
変数に何も代入していないときや、存在しないプロパティを参照したときなど、undefinedは意外といろいろな場面で登場します。

初心者のうちは「なぜここでundefinedになるのだろう？」と戸惑うかもしれません。
しかし、undefinedはJavaScriptの仕様として自然に発生する値なので、まずは「こういうものなんだ」と理解することが大切です。

undefinedかどうかを判定するときは、typeof や ===演算子 を正しく使い分けましょう。
optional chainingや??演算子といった近年の機能を組み合わせると、コードがすっきりしやすくなります。

開発でエラーが出たときも、「undefinedが予期せず返ってきていないか？」をチェックしてみてください。
適切に対処できれば、思わぬバグを回避しやすくなります。

最後まで読んでいただきありがとうございました。
undefinedを正しく扱えるようになると、JavaScriptでの開発がぐっとわかりやすくなるでしょう。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説