🐶

JavaScriptでのundefinedとnullの違い

2022/12/17に公開約1,900字

はじめに

この記事はCODE BASE OKINAWA Advent Calendarの2022 17日目の記事です。

今年の4月から関わっている業務でTypeScriptを触っている中で、「nullじゃなくてundefinedが入っているよ〜」など怒られたりして修正しての繰り返しで、二つの違いを明確にしないまま、なんとなく過ごしてしまっていました。
しかし2022年も残り2週間程度で終わるので、今回のアドベントカレンダーを機に違いを明確にさせよう思います。

TypeScriptについて

TypeScriptとは、「型のあるjavascript」です。
TypeScriptで書かれたコードは純粋なJavaScriptにコンパイルされます。
なので今回はJavaScriptでのundefinedとnullの違いを確認していきます。

共通点

まず共通点は、「値がない」です。(予想はしていましたが、、、w)

相違点

では、今度は相違点です。
意味合いの違いで言うと下記になります。

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

nullは型づけられているのに値がないという事ですね。

次はそれぞれで確認していきます。

undefined

まずundefinedの特徴をあげます。

  • 値が代入されていないため、値がない
  • undefinedは変数。なのでundefinedという変数を作成することもできる
  • プログラマーが明示的に使わなくても、自然に発生してくるもの

変数を宣言したときに初期値がなければJavaScriptはその変数に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

以下nullの特徴です。

  • 代入すべき値が存在しないため、値がない。
  • nullはリテラルなので、nullという変数を作成することはできない。
  • プログラマーが意図的に使わない限り発生しない。

やはり、nullは意図的に型付けたりしないと発生されなさそうですね。

typeof演算子

JavaScriptのtypeof演算子を確認します。
undefined->結果がプリミティブ名を指す"undefined"になる
null->"null"ではなく"object"になる。

typeof undefined;
"undefined"
typeof null;
"object"

どのように使い分けるか

undefinednullの使い分けをどうするかは大きなテーマになっているらしいです。
個人的には、undefinedが自然に発生するという事なのでundefinedを使っていく方が、ミスが減るのかなと思いました。他のことに注力をした方が良いのかと。しかし、所属する開発チームにおいてもルールは異なると思うのでその際は、そのルールに沿っていこうと思います。

こちらの記事には今回のundefinednullの違いが細かく記載せれておりました。
http://nmi.jp/2022-10-17-Understanding-Undefined-And-Null

終わりに

今回はJavaScriptのundefinedとnullの違いをまとめていきました。
これで、なんとなくundefined使ったり、null使ったりはしなくなるのではないかな。またエラーにぶち当たってもすんなり理解できるかと!

Discussion

ログインするとコメントできます