目次
はじめに
この記事ではJavaScriptにおけるnullとundefinedの違いについて説明します。
Q. nullとundefinedの違いがわかりますか？
なんとなく、どちらも値がないくらいのイメージがありますが、意外と明確な違いを知らない人が多いんじゃないでしょうか？
ということでその方のために説明していこうと思います。
null
nullは意図的にオブジェクトの値が存在しないことを表します。
もう少しプログラム的に言えば、メモリ空間から解放された状態です。(メモリの参照を持たない)
// nullを明示的に入れる必要がある。
const val = null;
console.log(val); // null明示的に入れる必要があるので、関数の戻り値などで指定すれば、nullになります。
const val = retNull();
console.log(val2); // null
function val() {
return null;
}undefined
undefinedは、初期化されていない(値が代入されていない)変数を表します。
// 宣言されてるが、初期化されていない。
const val;
console.log(val); // undefiedその他にも、以下の場合にundefinedとなります。
- 配列の要素数以上の要素にアクセスした場合
- オブジェクトに存在しないプロパティにアクセスした場合
- 戻り値のない関数が返す値
配列の要素数以上の要素にアクセスした場合
const array = [1, 2, 3, 4];
console.log(array[10]); // undefinedオブジェクトに存在しないプロパティにアクセスした場合
- 連想配列の場合
const dict = { 'key1': 'val1' };
console.log(dict['key2']); // undefined- クラスの場合
const Human = class {
constructor(name) {
this.name = name;
}
}
var nobita = new Human('Nobita');
console.log(nobita.name); // Nobita
console.log(nobita.age); // undefined戻り値のない関数が返す値
const val = voidFunc();
console.log(val); // undefined
function voidFunc() {
return;
}null と undefined の比較
JavaScriptには等値演算子(==)と同値演算子(===)があります。
これらの説明は割愛します。以下を参考にしてください。
nullとundefinedは以下のように比較されます。
const val1 = null;
var val2;
// 等値演算子の場合
if (val1 == val2) {
console.log("true");
} else {
console.log("false");
}
// 実行結果：true
// 同値演算子の場合
if (val1 === val2) {
console.log("true");
} else {
console.log("false");
}
// 実行結果：false等値演算子の場合、trueを返しているため、同じものとして扱います。
同値演算子の場合、falseを返しているため、異なるものとして扱います。
参考
あわせて読みたい
null – JavaScript | MDN
null という値は、意図的にオブジェクトの値が存在しないことを表します。これは JavaScript のプリミティブ値の 1 つであり、論理演算では偽値として扱われます。
あわせて読みたい
undefined – JavaScript | MDN
グローバルの undefined プロパティはプリミティブ値の undefined を表します。これは JavaScript におけるプリミティブ型の一つです。
まとめ
今回はJavaScriptにおけるnullとundefinedの違いについて説明しました。
このようなちょっとした違いを知ってるだけでも技術の差は出てくるんじゃないかと思ってます。
是非、いいねやコメントをお願いします。
コメント