JavaScriptにおけるundefinedとnullの違い

これはなに

値がないときに利用する undefined と null ですが、いつも違いについてぱっと思い出せなくなるので、記事化して整理したいと思います。

意味の違い

undefined と null の違いを検索したときに、「２つの違いは曖昧である」と表現する記事は多かったです。
undefinedとnullの違い | TypeScript入門『サバイバルTypeScript』では、このように表現していました。

• undefined
  • 値が代入されていないため、値がない
• null
  • 代入すべき値が存在しないため、値がない

発生タイミング

• undefined
  • 自然発生する = 定義されていない
• null
  • 自然発生しない = 定義された「空」を返す

nullは開発者が「空である」という状態を意図的に表すための値です。

undefinedは開発者が意図的に使わなくても自然発生します。
そもそも参照することを想定されていません。
変数を宣言したときに初期値がなければ、undefinedが代入されます。

例:変数が初期化されてないとき

let x;
console.log(x); 
//結果 undefined

例:プロパティが存在しないとき

let obj = { a:123 }
console.log(obj.b);
//結果 undefined

例:配列の添字の場所が存在しないとき

const arr = [];
console.log(arr[0]);
//結果 undefined

例：関数の戻り値がないとき

function func() {}
console.log(func());
//結果 undefined

変数と関数

• undefined
  • 変数
• null
  • リテラル

typeof演算子

typeof undefined;
//結果 "undefined"
typeof null;
//結果 "object"

どっちを使えばいい？

TypeScriptの開発チームのコーディングGuideにはundefinedを使うという記述がありました。

null and undefined
1.Use undefined. Do not use null.

とはいえ、各開発チームの方針があると思うので、準拠していくと良いと思います。

---

この記事が誰かのお役に立てると幸いです。

参考

• undefinedとnullの違い | TypeScript入門『サバイバルTypeScript』
• 山田 祥寛."データ型." 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで. 技術評論社,2016, 57.
• null - JavaScript | MDN