はじめに
JavaScriptを学んでいると、nullやundefinedという値に出会います。
どちらも「何もない」を表しているように見えますが、実は意味が違います。
この記事では、この2つの違いをわかりやすく整理します。
undefinedとは
undefinedは 「まだ何も入っていない」 という状態です。
JavaScriptが自動的につける値で、「自分では何もしていないのに勝手についている」イメージです。
let name;
console.log(name); // undefined
変数を宣言したけど、何も代入していない → JavaScriptが「まだ何も入ってないよ」とundefinedをつけてくれます。
undefinedになる場面
// 1. 変数を宣言しただけ
let a;
console.log(a); // undefined
// 2. 存在しないオブジェクトのプロパティ
const user = { name: "太郎" };
console.log(user.age); // undefined（ageは存在しない）
// 3. 関数が何も返さないとき
function hello() {
console.log("こんにちは");
// returnがない
}
const result = hello(); // undefined
nullとは
nullは 「意図的に"何もない"を入れた」 という状態です。
プログラマーが自分で「ここには何もないよ」と明示的にセットする値です。
let name = null;
console.log(name); // null
nullを使う場面
// 1. データが見つからなかったとき
function findUser(id) {
const user = database.find(id);
if (!user) {
return null; // 「見つからなかった」を明示的に返す
}
return user;
}
// 2. 値をリセットしたいとき
let selectedItem = { id: 1, name: "りんご" };
selectedItem = null; // 選択を解除
2つの違いをまとめると
undefined |
null |
|
|---|---|---|
| 意味 | まだ何も入っていない | 意図的に「何もない」を入れた |
| 誰がセットする？ | JavaScript（自動） | プログラマー（手動） |
| イメージ | 空っぽの箱 | 「空っぽです」と書かれた箱 |
let a; // undefined（何もしていない）
let b = null; // null（自分で「何もない」をセットした）
比較するときの注意点
console.log(null == undefined); // true（ゆるい比較では同じ扱い）
console.log(null === undefined); // false（厳密比較では違う）
==（ゆるい比較）では同じに見えますが、===（厳密比較）では別物です。
基本的に === を使うことが推奨されています。
終わりに
-
undefined→ JavaScriptが自動で「まだ何もないよ」とつける -
null→ プログラマーが自分で「何もないよ」とセットする
この違いを知っておくと、次の記事で説明する falsyな値 の理解がスムーズになります。