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