今回は、JavaScriptを学ぶうえで必ず出会う
とても大切なテーマを整理していきます。
それが、「null」と「undefined」。
どちらも「値がない」状態を表しますが、
実はこの2つ、意味はまったく同じではありません。
この違いを曖昧にしたまま進んでしまうと、
思わぬエラーに悩まされることもあります💦
今のうちに、しっかり土台を整えていきましょう！
undefined とは何か？
undefined は、「まだ値が入っていない」状態 を表します。
たとえば、変数を用意しただけで
中身を入れていない場合。
let value;console.log(value); // undefined
箱（変数）は用意した。
でも中身はまだ決まっていない。
そんなとき、JavaScriptが自動的に undefined を入れてくれます。
つまり undefined は、
私たちが積極的に使うというよりも、
JavaScript側が知らせてくれる状態 なのです。
undefined にアクセスするとどうなる？
ここで注意が必要です！
undefined そのものを表示するのは問題ありません。
しかし、
undefined の中身にさらにアクセスしようとするとエラーになります。
let value;console.log(value.name);
このように値を取り出そうとすると、
Uncaught TypeError: Cannot read properties of undefined
というエラーが出ます。
これは、
「まだ何も入っていないのに、その中を見ようとしていますよ」
とJavaScriptが教えてくれている状態です。
初心者がよく出会うエラーのひとつなので、
この感覚は早めに慣れておきましょう！
null とは何か？
一方で null は、「意図的に空にしている」状態 を表します。
let value = null;console.log(value); // null
これは、
「この箱の中身は、今はあえて空にしています」
という、開発者の意思表示です。
たとえば、
・プロフィールの自己紹介がまだ未入力
・選択中のユーザーがまだ決まっていない
こういった状態を明示したいときに null を使います。
つまり、
undefined→ 自然に発生する「未定義」null→ 意図して作る「空」
という違いがあります。
なぜ「空」が2種類あるの？
ここが一番混乱しやすいポイントです。
でも役割で考えると、とてもシンプルなのです。
- undefined
「まだ準備ができていない」
「探したけど見つからなかった」
といった、プログラム上の状態。 - null
「今は空です」ということを、
データとして明示したいときの値。
この違いを意識できるようになると、
コードの読みやすさが一段階上がります！
比較するときの注意点
JavaScriptには、
==（緩い比較）===（厳密な比較）
があります。
const a = null;
const b = undefined;console.log(a == b); // true
console.log(a === b); // false
== を使うと、
null と undefined は「同じような空」として扱われ、
=== を使うと、
値だけでなく、型まで含めて完全に同じかどうかを確認します。
バグを防ぐためにも、
比較するときは === を使う習慣をつける
これがとても大切です！
まとめ
ここまで、null と undefined の違いを整理してきました。
一見似ている2つの値ですが、
意味を正しく理解しているかどうかで、エラーへの強さが大きく変わります！
＼＼ 今回のまとめ ／／
・ undefined は「まだ値が入っていない」状態
・ null は「あえて空にしている」状態
・ undefined の中身にアクセスするとエラーになる
・ 比較するときは === を使うのがおすすめ
どちらも「空」ですが、
意味はまったく同じではありません！
この違いを理解できると、
エラーの原因を冷静に見つけられるようになります。
小さな違いのように見えますが、ここはとても大事な土台なのです。
次は、これらの値を使いながら処理を分けていく
「条件分岐（if文）」 を見ていきましょう！
コメント