JavaScriptで理解するnullとundefinedの違い｜初心者向け基本ガイド

1. undefinedとは？基本の理解

1. undefinedとは？基本の理解

JavaScriptのundefinedは、変数が宣言されたけれどもまだ値が代入されていない状態を示します。たとえば、新しい変数を作ったとき、特に値を設定しなければ自動的にundefinedになります。

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

上の例では、変数aを宣言しただけで値を設定していません。したがって、console.logで確認するとundefinedと表示されます。

2. nullとは？意図的に空にする

2. nullとは？意図的に空にする

一方、nullはプログラマーが「この変数は意図的に空です」と設定するための値です。これはデータベースやオブジェクトの初期化などでよく使われます。

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

この例では、変数bにnullを代入して、値が空であることを明示しています。

3. undefinedとnullの違いをイメージで理解する

3. undefinedとnullの違いをイメージで理解する

初心者向けにイメージすると、undefinedは「まだ箱に何も入れていない状態」、nullは「箱の中身を空にすることを決めた状態」と考えるとわかりやすいです。

let box;        // undefined: 箱はあるけどまだ何も入れていない
let emptyBox = null; // null: 箱の中身は意図的に空

4. 変数の初期化での使い分け

4. 変数の初期化での使い分け

実際のプログラミングでは、undefinedは自動的に設定されることが多く、nullは初期化のときや値をリセットしたいときに使います。

let userName;          // まだ名前は設定されていない
let userEmail = null;  // メールは意図的に空

こうして使い分けると、コードを見た人が「値が未設定なのか、意図的に空なのか」がすぐにわかります。

5. typeof演算子での違い

5. typeof演算子での違い

typeof演算子を使うと、undefinedとnullの違いが少し面白い形で見えます。

console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object"（これはJavaScriptの仕様による）

注意点として、nullはtypeofで"object"と表示されますが、これはJavaScriptの歴史的な仕様です。実際にはnullは「値がないこと」を示しています。

6. 関数の戻り値での使用例

6. 関数の戻り値での使用例

関数で値が返ってこない場合はundefinedになります。逆に、条件によって値が存在しない場合はnullを返すこともあります。

function findUser(id) {
  if (id === 1) {
    return "Taro";
  } else {
    return null; // ユーザーが存在しない場合
  }
}

console.log(findUser(1)); // "Taro"
console.log(findUser(2)); // null

このようにnullを返すことで、「値がないけれど処理自体は正常」という意味を持たせることができます。

7. オブジェクトや配列でのnullとundefined

7. オブジェクトや配列でのnullとundefined

オブジェクトや配列でもnullとundefinedの使い分けが可能です。

let obj = { name: "Taro", age: undefined };
let arr = [1, null, 3];

console.log(obj.age); // undefined
console.log(arr[1]); // null

オブジェクトではプロパティがまだ設定されていない場合はundefined、配列の値を意図的に空にする場合はnullを使います。

8. nullとundefinedを比較する方法

8. nullとundefinedを比較する方法

比較のときは注意が必要です。==と===で結果が変わります。

console.log(null == undefined);  // true
console.log(null === undefined); // false

==は値だけを比較するためtrueになりますが、===は型も比較するのでfalseになります。

9. 実務での使い分けのコツ

9. 実務での使い分けのコツ

実務では、次のように使い分けると分かりやすくなります。

• 変数を宣言しただけでまだ値を決めていない場合 → undefined
• 値をリセットしたり、意図的に空にしたい場合 → null
• 関数で値が存在しないことを明示したい場合 → null

let temp;         // undefined: 未設定
let result = null; // null: 意図的に空

このルールを覚えておくと、コードの可読性が上がり、バグも減らせます。

まとめ

まとめ

今回の記事では、JavaScriptでよく混同されやすいnullとundefinedの違いを初心者向けに詳しく解説しました。undefinedは変数が宣言されているものの、まだ値が設定されていない状態を示す一方で、nullはプログラマーが意図的に「値を空にする」と設定する特別な値です。コードの中で使い分けることで、変数の状態や意図が明確になり、可読性の高いプログラムを作ることができます。

まず、変数宣言時に値を設定しなければ自動的にundefinedになります。例えばlet a;と宣言するだけで、console.log(a)とするとundefinedと表示されます。これは、JavaScriptが変数の存在は認識しているが、まだ値が入っていないことを示しています。

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

一方で、nullはプログラマーが明示的に値を空にするために使用します。例えば、ユーザー情報のメールアドレスがまだ設定されていない場合にlet userEmail = null;とすることで「意図的に空である」という意味を持たせることができます。

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

undefinedとnullの違いは、初期化のタイミングや値の有無の意味付けによって使い分けられます。例えばオブジェクトのプロパティがまだ設定されていない場合はundefinedを使い、配列の特定の要素を意図的に空にしたい場合にはnullを使うとコードの意図が明確になります。

 let obj = { name: "Taro", age: undefined }; let arr = [1, null, 3];
console.log(obj.age); // undefined
console.log(arr[1]); // null

また、typeof演算子で確認するとundefinedは文字通り"undefined"と表示されますが、nullは"object"と表示されます。これはJavaScriptの歴史的な仕様によるものですが、混乱せずに「値がないこと」を示していると理解しておけば問題ありません。

console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"

さらに、比較演算子を使う際も注意が必要です。==ではnull == undefinedはtrueになりますが、===では型も含めて比較するためfalseになります。この違いを理解することで、バグを防ぎやすくなります。

console.log(null == undefined); // true
console.log(null === undefined); // false

実務では、変数を宣言しただけで値を決めていない場合はundefined、値をリセットしたり意図的に空にしたい場合はnullを使うのが基本です。関数の戻り値でも、値が存在しない場合にはnullを返すことで「値がないが正常」という意味を持たせることができます。

function findUser(id) {
if (id === 1) {
return "Taro";
} else {
return null;
}
}
console.log(findUser(1)); // "Taro"
console.log(findUser(2)); // null

これらの基本を押さえることで、JavaScriptの変数管理がスムーズになり、バグを減らし、可読性の高いコードを書けるようになります。