【JavaScript / TypeScript】null と undefined の違いと使い分けを考える
はじめに
TypeScript
でのnull
とundefined
の使い分け方に対する考えと、null
とundefined
の違いについて、自分なりに調べて学んだことを書いた記事です。
結論どっちを使うべきか
undefined
を積極的に利用していくべき
(null
の利用を避けられない場合を除いて)
ではないか、という結論になりました。
TypeScript
開発チームのGithub wiki にあるコーディングガイドにも
Use undefined. Do not use null.
「null
は使用せず、undefined
を使用してください。」
と記載されています。
(あくまでTypeScript
の開発チーム内での決め事ではありますが、)
null と undefined の違い
null
もundefined
もプリミティブ型の値の一つ。
どちらも「値が存在しない」ことを表現するものであるものの、null
とundefined
には明確な違いがある。
意味合いでの違い
null: 代入すべき値が存在しないため、値がない(変数がメモリに対する参照を保持しない)
undefined: 値が代入されていないため、値がない(変数が未定義である、初期化されていない)
言語使用上での違い
nullは自動的に設定されないが、undefinedは自動的に設定される
null: 開発者が意図的に設定しない限り設定されない。
undefined: 開発者が意図しなくても、自動的に設定される。
// 変数を宣言したときに初期値が存在しなければ、その変数にundefinedが設定される。
let value;
console.log(value); //=> undefined
// オブジェクトに存在しないプロパティや配列にない要素にアクセスしたときも、自動的にundefinedになる。
const obj = {};
console.log(obj.foo); //=> undefined
const arr = [];
console.log(arr[0]); //=> undefined
// 戻り値がない関数の戻り値を取得したときもundefinedになる。
function func() {}
console.log(func()); //=> undefined
nullはリテラル、undefinedは変数
null: リテラルなのでnullという名前の変数を作ることはできない。
undefined: 変数なのでundefined
という変数を作ることができる。(グローバルより内側のスコープに限る)
※ ちなみにwindow
オブジェクト(グローバルオブジェクト)はundefined
というプロパティを持っている。この初期値はundefined
。
コンソール(Google Chromeディベロッパーツール) |
---|
typeof の挙動
typeof null // "object" (歴史的な理由で "null" ではないらしい)
typeof undefined // "undefined"
isNaN の挙動
isNaN(1 + null) // false
isNaN(1 + undefined) // true
JSON での挙動
null: 設定できる。
undefined: 設定できない。
console.log(JSON.stringify({ foo: undefined })); //=> {}
console.log(JSON.stringify({ foo: null })); //=> {"foo": null}
おまけ
== と === で比較
null === undefined // false
null == undefined // true
まとめ
null === undefined // false
null == undefined // true
冒頭でも述べた通り、TypeScript
での開発では
null
の利用を避けられない場合を除いて、undefined
を積極的に利用していくべき、かなと考えました。
理由としては、
「値が存在しない」ことを表現する方法を、「自動的に発生してしまうundefined
」に寄せた方が統一しやすいから、と思いました。(日本語難しい...)
ただ一方で、null
を返すAPIなどのハンドリングをする場合などはnull
の利用を避けられなかったりするので、完全にnull
を利用しないことは難しいのかもしれない。
非常に参考にさせていただいたこちらの資料では
使い分け意識を育てる労力は、それに見合うメリットが少ない
との記載もあります。
最後に
間違い、ご指摘などございましたらコメントお願いします!!
参考
ありがとうございました!!!
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/null
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined
- https://typescriptbook.jp/reference/values-types-variables/undefined-vs-null
- https://typescript-jp.gitbook.io/deep-dive/recap/null-undefined
- https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines#null-and-undefined
- https://www.amazon.co.jp/%E7%8B%AC%E7%BF%92JavaScript-%E6%96%B0%E7%89%88-CodeMafia-%E5%A4%96%E6%9D%91-%E5%B0%86%E5%A4%A7/dp/479816027X/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=%E7%8B%AC%E7%BF%92JavaScript&qid=1639187025&s=books&sr=1-1
Author And Source
この問題について(【JavaScript / TypeScript】null と undefined の違いと使い分けを考える), 我々は、より多くの情報をここで見つけました https://qiita.com/tkmd35/items/af80c884cfb034ed0e0f著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .