JavaScriptでのundefinedとnullの違い
はじめに
この記事は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"
どのように使い分けるか
undefinedとnullの使い分けをどうするかは大きなテーマになっているらしいです。
個人的には、undefinedが自然に発生するという事なのでundefinedを使っていく方が、ミスが減るのかなと思いました。他のことに注力をした方が良いのかと。しかし、所属する開発チームにおいてもルールは異なると思うのでその際は、そのルールに沿っていこうと思います。
こちらの記事には今回のundefinedとnullの違いが細かく記載せれておりました。
終わりに
今回はJavaScriptのundefinedとnullの違いをまとめていきました。
これで、なんとなくundefined使ったり、null使ったりはしなくなるのではないかな。またエラーにぶち当たってもすんなり理解できるかと！
Discussion