JavaScriptのnullとundefinedの違い

Kyoto Tech Talk #8
学生LT枠

Transcript

1. JavaScript の nullとundefined の違い それっぽくそれなりに @Retasusan 2025/5/29 kyoto tech talk
2. 自己紹介 • @Retasusan ◦ 　@retasusan_510 • 普段は大学生 ◦ 最近レポートが苦しい… • Ruby on RailsとViteで アプリを作っている • 昨日クロスバイク購入 現実の姿 インターネットの姿
3. 縦置きされる自転車
4. nullとundefined を 使い分けていますか？
5. そもそもnullとundefinedって何？ • null ◦ プリミティブ型の一つ ◦ リテラル ◦ 代入すべき値が存在しないこと明示するときに使われがち？ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/null • undefined ◦ プリミティブ型の一つ ◦ グローバルオブジェクトのプロパティ ◦ 値が代入されていない時とかに使われる？ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined
6. いろんな関数で比較してみた • nullとundefined、引数なしを渡した時の関数の挙動の違い
7. typeof演算子
8. typeof演算子 • 引数がなし ◦ undefined • undefined ◦ undefined • null ◦ object
9. 等価演算子・厳密等価演算子
10. 等価演算子・厳密等価演算子 • 等価演算子 ◦ 暗黙の型変換でnullと undefinedが等しく扱われる • 厳密等価演算子 ◦ 引数なしとundefinedは 等しい ◦ nullは等しくない
11. デフォルト引数
12. デフォルト引数 • 引数がなし、undefined ◦ デフォルト値 • null ◦ null
13. ちょっと有名なやつ
14. isNaN関数
15. isNaN関数 • 引数なし(undefined), undefined ◦ true(NaN) • null ◦ false(数値) • 数値 + undefined ◦ true(NaN) • 数値 + null ◦ false(数値) • 数値 ◦ false(数値)
16. isNaN関数(余談)
17. isNaN関数(余談) • 真偽値と文字列の数値 ◦ false(数値になる) • NaN ◦ true • NaN === NaN ◦ false ◦ 等価演算子だと比較できないから isNaN関数がある
18. Number関数
19. Number関数 • 引数なし ◦ 0 • null ◦ 0 • undefined ◦ NaN • これがisNaN関数の中で動いてる
20. なんか意外だったやつ
21. JSON.stringify()
22. JSON.stringify() • 通常のJSオブジェクト ◦ nullとundefinedを保持 • JSONオブジェクト ◦ undefinedは無効な値 ◦ プロパティごと無視される • JSON配列 ◦ undefinedはnullに置換され る
23. Date関数
24. Date関数 • 引数なし ◦ 現在時刻 • null ◦ UNIXエポック • undefined ◦ Invalid Date
25. まとめ • nullとundefinedでは挙動が違うことがよくある • undefinedと引数なしは同じ挙動のことが多い ◦ 稀に違う
26. JavaScript の nullとundefined の違い それっぽくそれなりに @Retasusan 2025/5/29 kyoto tech talk