サンプルコードで理解を深める：実例を通して確認する「null」と「undefined」

2024-04-18

JavaScriptにおいて、「null」と「undefined」はどちらも「値が存在しない」ことを表す特殊な値として扱われます。しかし、その意味合いと扱い方には微妙な違いが存在します。さらに、オブジェクトとの関連性も理解しておくことが重要です。

この解説では、「null」と「undefined」の違いと、オブジェクトとの関係について分かりやすく解説します。

「null」と「undefined」の意味合い

「undefined」

変数に値が代入されていない状態を表します。
宣言された変数が初期化されていない場合や、関数から値を返さずに終了した場合などに発生します。
意図せず発生することもあれば、意図的に利用することもあります。

「null」

意図的に設定された「値が存在しない」状態を表します。
オブジェクトや配列などの参照が解除された際に代入されます。
開発者が明示的に設定することで、論理的に「値が存在しない」ことを示すことができます。

オブジェクトとの関係

自体はオブジェクトではありません。
オブジェクトにアクセスしようとした際に、存在しないプロパティや要素を参照した場合に返される値です。
オブジェクトのプロパティや要素が存在しないことを論理的に表現するために利用されます。

自体はオブジェクトですが、空のオブジェクトです。
プロパティも要素も存在しないオブジェクトとして扱われます。
オブジェクトを意図的に初期化したり、存在しないオブジェクトを明示的に表現したりする際に利用されます。

その他の差異

typeof 演算子
- typeof null は "object" を返します。
- typeof undefined は "undefined" を返します。
厳格な等価演算子 (===)
- null === undefined は false です。
論理演算子

使い分け

変数が初期化されていない場合は、undefined を使用します。
オブジェクトを意図的に空の状態にしたい場合は、null を使用します。
オブジェクトの存在有無を判定したい場合は、typeof 演算子 を使用します。
厳密な等価比較が必要な場合は、=== 演算子 を使用します。

「null」と「undefined」はどちらも「値が存在しない」ことを表す特殊な値ですが、意味合いと扱い方に違いがあります。オブジェクトとの関係も理解し、状況に応じて適切な値を使い分けることが重要です。

サンプルコード：nullとundefinedの違い

// 変数宣言
let message1;
let message2 = null;

// typeof 演算子による確認
console.log(typeof message1); // undefined
console.log(typeof message2); // object

// 厳格な等価演算子 (===) による確認
console.log(message1 === undefined); // true
console.log(message1 === null); // false
console.log(message2 === undefined); // false
console.log(message2 === null); // true

// 論理演算子による確認
if (message1) {
  console.log('message1 は存在します');
} else {
  console.log('message1 は存在しません');
}

if (message2) {
  console.log('message2 は存在します');
} else {
  console.log('message2 は存在しません');
}

出力結果

undefined
object
true
false
false
true
message1 は存在しません
message2 は存在しません

解説

変数宣言
- message1 は初期化されていないため、undefined が代入されます。
- message2 には null が明示的に代入されます。
typeof 演算子による確認
- typeof message1 は undefined を返します。これは、message1 が未定義の値であることを意味します。
- typeof message2 は object を返します。これは、null はオブジェクト型として扱われることを意味します。
厳格な等価演算子 (===) による確認
- message1 === undefined は true を返します。これは、message1 が undefined であることを厳密に意味します。
論理演算子による確認
- message1 は undefined であるため、if 条件式は false となり、「message1 は存在しません」と出力されます。

このサンプルコードを通して、null と undefined はどちらも「値が存在しない」ことを表す特殊な値ですが、意味合いと扱い方に違いがあることを理解することができます。

以下のコード例は、null と undefined の使い分けをさらに詳しく説明しています。

例 1：オブジェクトの初期化

// オブジェクトを初期化する
let user = null;

// オブジェクトのプロパティを追加する
user.name = 'Taro';
user.age = 30;

console.log(user); // { name: 'Taro', age: 30 }

例 2：存在しないオブジェクトのプロパティへのアクセス

// オブジェクトを宣言する
let article = {};

// 存在しないプロパティにアクセスする
console.log(article.title); // undefined

// 存在しないプロパティに値を代入する
article.title = 'JavaScript入門';

console.log(article.title); // JavaScript入門

例 3：関数の引数と戻り値

// 引数なしで関数を呼び出す
function greet() {
  console.log('Hello!');
}

greet(); // Hello!

// 関数から値を返さない
function calculate() {
  // 処理を行う
}

const result = calculate();
console.log(result); // undefined