undefinedとは何か
JavaScriptにおいて undefined は「値が定義されていない状態」を表すプリミティブ型です。 ECMAScript仕様では「未初期化の変数」や「存在しないプロパティにアクセスした結果」として返される特別な値と定義されています。
イティセル／コード専門官わかりやすく言うと、undefined は「値がまだ無いぞ！」というサインです。
let x;
console.log(x);実行結果
リクナ / JavaScript統括官undefined // 値が無い
ここで x は宣言されたものの、値が代入されていないため undefined になります。
undefinedが返る代表的なケース
1. 変数の未初期化
イティセル／コード専門官最もよくあるケースです。変数を宣言したものの、初期値を代入していない状態でその変数を参照すると undefined が返ってきます。
let a;
console.log(a);実行結果
リクナ / JavaScript統括官undefined
2. 存在しないオブジェクトプロパティ
イティセル／コード専門官オブジェクト内に存在しないプロパティ（キー）にアクセスした結果です。 たとえば以下の obj には name というプロパティは定義されていますが、age というプロパティは存在しません。存在しないプロパティを参照しようとすると、JavaScriptは undefined を返します。
const obj = { name: "Taro" };
console.log(obj.age);実行結果
リクナ / JavaScript統括官undefined
3. 戻り値のない関数
イティセル／コード専門官return 文が書かれていない場合、関数は自動的に undefined を返します。 そのため、関数を呼び出しても戻り値がないときには undefined が出力されます。
function greet() {
console.log("Hello");
}
console.log(greet());実行結果
リクナ / JavaScript統括官Hello
undefined
イティセル／コード専門官ここでは、関数の中で “Hello” が出力され、その後に戻り値として undefined が返っていることが分かります。
return を使えば、undefined は返らず、指定した値だけが戻り値になります。
function greet() {
return "Hello";
}
console.log(greet());実行結果
リクナ / JavaScript統括官Hello
4. 配列の空要素
イティセル／コード専門官JavaScriptの配列は0番目から始まるという特徴があります。 例えば次のような配列を考えてみましょう。
const arr = [1, , 3];
console.log(arr[1]);実行結果
リクナ / JavaScript統括官undefined
イティセル／コード専門官この配列には3つの要素があるように見えますが、実際には次のような状態になっています。
arr[0]→ 値は 1arr[1]→ 値が存在しない（空要素）arr[2]→ 値は 3
ここで arr[1] を参照すると、JavaScriptは「この位置には値が入っていない」と判断し、結果として undefined を返します。
5. 関数の引数省略（補足）
イティセル／コード専門官関数を呼び出す際、定義されている引数を渡さなかった場合、その引数には自動的に undefined が割り当てられます。
function test(val) {
console.log(val);
}
test(); 実行結果
リクナ / JavaScript統括官undefined
undefined と null の違い
イティセル／コード専門官JavaScript初心者がよく混乱するのが、undefined と null の違いです。
undefined「机の上に箱はあるけど、中身はまだ入っていない」状態。 変数を宣言しただけで値を代入していないときや、存在しないプロパティを参照したときなどに、JavaScriptエンジンによって自然に返されます。null「箱の中身をわざと空にしておいた（空っぽだと明示した）」状態。 開発者が「ここには値が存在しない」と意図的に代入するときに使います。
let a;
let b = null;
console.log(a);
console.log(b);実行結果
リクナ / JavaScript統括官undefined
null
undefined と比較演算子
==（抽象的等価演算子）undefinedとnullは「どちらも値が存在しない」という点で扱いが似ているため、trueになります。===（厳密等価演算子）undefinedとnullは型が異なるため、falseになります。
console.log(undefined == null);
console.log(undefined === null);実行結果
リクナ / JavaScript統括官true
false
よくある落とし穴
typeof の結果
イティセル／コード専門官typeof undefined は "undefined" と返ってきます。 しかし、typeof null はどうでしょうか。
console.log(typeof undefined);
console.log(typeof null);実行結果
リクナ / JavaScript統括官“undefined”
“object”
これはJavaScriptが誕生した当初の仕様上のバグで、本来なら "null" と返ってほしいところです。ただし、既存のコードとの互換性を保つために修正されず、現在もそのまま残されています。 そのため、null を判定したい場合は typeof ではなく、=== null を使うようにしましょう。
プロパティ存在チェック
イティセル／コード専門官obj.key === undefined obj に key プロパティは存在しません。存在しないプロパティを参照すると、自動的に undefined が返ります。そのため undefined === undefined となり、結果は true になります。 要するに、これは「値を取り出したら undefined だった」という判定であり、プロパティの有無までは確認していません。
"key" in obj in 演算子は「そのプロパティが存在するかどうか」を調べます。今回の obj には key プロパティ自体が存在しないため、結果は false になります。 こちらは「プロパティそのものがあるかどうか」を確認する方法です。
つまり「undefined が返るけど、プロパティ自体は存在しない」というのがよくある落とし穴です。
const obj = {};
console.log(obj.key === undefined);
console.log("key" in obj);実行結果
リクナ / JavaScript統括官true
false
undefined を安全に扱うテクニック
デフォルト値を設定する（Null合体演算子 ??）
イティセル／コード専門官?? は Nullish coalescing（ヌル合体演算子） と呼ばれます。 「左側が null または undefined のときだけ、右側の値を使う」という演算子です。つまり「値がなければデフォルトを使う」という安全な書き方ができます。
イメージとしては「ゲストの名前が分からなければ、代わりに用意した仮名を使う」という感じです。
function greet(name) {
name = name ?? "ゲスト";
console.log(`こんにちは、${name}さん`);
}
greet();実行結果
リクナ / JavaScript統括官こんにちは、ゲストさん
オプショナルチェイニング ?.
イティセル／コード専門官以下の user は空オブジェクト {} なので、profile プロパティは存在しません。 そのまま user.profile.age と書くと、profile が無いためエラーになります。
そこでオプショナルチェイニング演算子 ?. を使うと、途中で null や undefined にぶつかった時点で、エラーを出さずに undefined を返すようになります。
const user = {};
console.log(user.profile?.age);実行結果
リクナ / JavaScript統括官undefined //（エラーにならない）
要するに、?. は「存在するか分からないプロパティに安全にアクセスするための保険」です。これを使うことで、実務でよくある「存在しないプロパティ参照によるエラー」を防ぐことができます。
undefined と void 0
1. 昔の JavaScript 初期の JavaScript では、グローバルの undefined はただの変数扱いでした。そのため、次のように再代入できてしまったのです。
undefined = 123;
console.log(undefined);昔の実行結果
リクナ / JavaScript統括官123
イティセル／コード専門官これでは「本来の undefined」を信用できなくなります。
2. そこで使われたのが void 0 void 演算子は「式を評価して必ず undefined を返す」という性質があります。つまり void 0 は常に undefined になります。 これを使えば、たとえ誰かが undefined を上書きしてしまっても、安全に本来の undefined を得ることができました。昔の JavaScript では「undefined を確実に参照したいなら void 0 を使え」というのが定番の書き方だったのです。
console.log(void 0);実行結果
リクナ / JavaScript統括官undefined
現在のJavaScriptでは 現在のモダンなブラウザ環境などでは、グローバルな undefined は上書きできない仕様に変更されています。そのため、通常は void 0 を使わずにそのまま undefined を使用して問題ありません。 （※ただし、関数スコープなどのローカル変数としては依然として undefined という名前を定義できてしまう言語仕様の隙間は残っています）
まとめ
イティセル／コード専門官JavaScript における undefined は、「まだ値が定義されていない状態」を示すサインです。 変数を宣言しただけで値を入れていないとき、存在しないプロパティを参照したとき、戻り値のない関数を呼び出したときなど、さまざまな場面で自然に現れます。
null が「意図的に空にした値」であるのに対し、undefined は「まだ何も入っていない」という自然発生的な状態です。この違いを理解しておくと、コードの意図を正しく読み解けるようになります。
また、比較演算子や typeof の挙動には歴史的な仕様上のクセがあり、思わぬ落とし穴になることもあります。実務では Null合体演算子 ?? や オプショナルチェイニング ?. を活用することで、undefined を安全に扱うことができます。
かつては undefined が再代入可能だったため void 0 が使われていましたが、現在の通常のグローバル環境ではその必要はありません。
要するに、「undefined は JavaScript が『ここにはまだ値がないよ』と教えてくれるサイン」。これを押さえておけば、初心者がつまずきやすいポイントもクリアに理解できます。
もしこの記事が役に立ったと思ったら、シェアやコメントで教えてください。 いただいた声を今後の改善に活かしていきます。 最後まで読んでくださり、本当にありがとうございました。
JavaScriptに関する記事関連
コメント