📖

nullとundefinedの違いを理解する

2024/02/18に公開

はじめに

現在、Next.jsとExpressでサービスを開発しています。
jsだけでの開発は歴が浅く、nullとundefinedの違いを理解していなかったため、
express側の不要な処理が増えてしまったために、nullとundefinedの違いを整理しました。

サバイブルTypescriptには、「undefined」は、値が代入されていないため、値がない事「null」は、代入すべき値が存在しないため、値がない。
ただ、大きい括りで「値がない」ことで共通しているので、意外に区別できている人は少ないのではないでしょうか？

自分も文章だけで見ると使い方が分かりませんでした。
その為か最初は適当に実装していて、ライブラリなどによって、意図せず undefinedを送っていたり、nullを送ったりしていました。

undefinedとnullを意図せずに利用していたので、
バックエンド側で、「値がない場合にxxxする」などの処理を実行した時に
値を空にできないケースが起きました。

例えば、ユーザーテーブルがあったします。

Userテーブルで、nameと nicknameカラムがあり、nicknameはnullを許容していた場合

{ name: 'hoge', nickname: undefined }

とデータを送信しようとするとバックエンドのreq.bodyに中ではnicknameは落とされてしまいます。

{ name: 'hoge' }

そのため、新規作成及び、更新する際にカラムに値が入らないので意図せずした挙動になりました。

今後空の挙動においては、注意をしていかないといけないなと思いました。

useFormなどを使っていると、データを空にする場合を空文字として扱っていたりする箇所があったりするので、データ型は何でnull許容しているか？によって、
空の扱いは変わってくると思うので今後は適切に処理していきたい。