JavaScriptのnullとundefinedの違いを初心者向けにわかりやすく解説！

1. nullとは何か？

1. nullとは何か？

JavaScriptのnullは、プログラマーが『この変数には今は値がありません』と意図的に設定する値です。例えば、あとでオブジェクトを入れる予定の変数に、最初はnullを入れておくことがあります。

let user = null;
console.log(user); // null

この場合、userにはまだ何も情報が入っていませんが、意図的に「空」としています。

2. undefinedとは何か？

2. undefinedとは何か？

undefinedは、変数が宣言されたけれど値がまだ設定されていないときに自動的に入る値です。プログラマーが意図して入れることは少なく、JavaScript自体が初期値として設定します。

let age;
console.log(age); // undefined

この場合、ageにはまだ何も値を入れていないため、JavaScriptが自動でundefinedを返します。

3. nullとundefinedの違いを図で理解する

3. nullとundefinedの違いを図で理解する

わかりやすく例えると、nullは『箱を空にして置いておく』、undefinedは『箱をまだ作っていない』状態です。プログラマーが空にしたい場合はnullを使い、値がまだ設定されていない場合はundefinedが自動で入ります。

4. 実際に比較してみる

4. 実際に比較してみる

JavaScriptではnullとundefinedを比較することができますが、注意が必要です。

let x = null;
let y;
console.log(x == y);  // true
console.log(x === y); // false

ここで、==は値だけを比較し、nullとundefinedは等しいと判断されます。しかし、===は型も比較するので、型が違うため等しくありません。

5. nullとundefinedの使い分け

5. nullとundefinedの使い分け

初心者が迷いやすいポイントですが、基本はこう覚えましょう。

• null：意図的に空の値を設定したいとき
• undefined：値をまだ設定していないときや、変数宣言だけしたときに自動で入る

let selectedItem = null; // 後で値を設定する予定
let totalPrice;           // まだ何も値を入れていない
console.log(selectedItem); // null
console.log(totalPrice);   // undefined

6. 関数の返り値でも出てくる

6. 関数の返り値でも出てくる

関数を作ったときに、値を返さなければundefinedが返ります。意図的に「値がない」ことを返す場合はnullを返すこともあります。

function greet(name) {
  if (!name) {
    return null;
  }
  return "Hello, " + name;
}
console.log(greet());       // null
console.log(greet("太郎")); // Hello, 太郎

このようにnullは「値がないことを意図的に返す」ときに便利です。

7. オブジェクトのプロパティでも注意

7. オブジェクトのプロパティでも注意

オブジェクトのプロパティが存在しない場合はundefinedが返ります。意図的に空にしたい場合はnullを設定します。

let user = {
  name: "花子",
  age: null
};
console.log(user.name); // 花子
console.log(user.age);  // null
console.log(user.email); // undefined

この例ではageは意図的に空、emailはまだ設定していないためundefinedです。

8. まとめとしての理解ポイント

8. まとめとしての理解ポイント

JavaScriptのnullとundefinedは初心者が混乱しやすいですが、簡単に整理すると以下のようになります。

• 値がないことを意図的に表す → null
• 値がまだ設定されていない → undefined
• 比較のときは==と===の違いに注意
• 関数やオブジェクトでもよく登場する基本概念

この違いを理解することで、JavaScriptでの変数管理や条件分岐がより明確になります。

まとめ

まとめ

今回の記事では、JavaScriptにおけるnullとundefinedの違いについて詳しく解説しました。nullはプログラマーが意図的に「値がないこと」を表すために設定する値であり、undefinedは変数が宣言されたもののまだ値が設定されていない場合にJavaScriptが自動的に割り当てる値であることを学びました。
また、比較演算子==と===の違いに注意することも重要です。==は型を無視して値を比較するためnullとundefinedを同じと判断しますが、===は型も含めて比較するため等しくないと判断されます。
実際のコード例として、変数にnullを設定する場合と、まだ値を設定していない変数の挙動を見比べることで、どのような状況でnullを使うべきか、またundefinedが自動的に現れるタイミングを理解できました。さらに、関数の返り値やオブジェクトのプロパティにおいても、nullとundefinedの使い分けが重要であることが確認できました。

初心者が混乱しやすいポイントとして、nullとundefinedは見た目が似ていても意味が異なること、意図的に「値がないこと」を示す場合はnull、まだ値が設定されていない場合はundefinedを正しく理解することが重要です。これにより、バグを防ぎ、条件分岐やデータ管理がよりスムーズになります。
例えば、フォームの入力値やAPIから取得するデータで値が存在しない場合にnullを使い、未定義の変数やオブジェクトプロパティにはundefinedが自動的に入ることを意識することで、より安全でわかりやすいコードを書くことができます。

let product = null; // 後で値を設定する予定
let quantity;       // まだ値を設定していない

console.log(product);  // null
console.log(quantity); // undefined

if (product == quantity) {
  console.log("値は等しい（==）");
} else {
  console.log("値は等しくない（==）");
}

if (product === quantity) {
  console.log("値も型も等しい（===）");
} else {
  console.log("値か型が違う（===）");
}

値は等しい（==）
値か型が違う（===）