この記事では、undefinedとnullの違いをコップに入った水に例えてお話します。

コップの中身が入っている状態

あるところにコップがあり、液体が100入っていたとします。
このコップを変数cupとして表したとします。
これをコードで書くと、


let cup = 100

<- 100

となります。

そして、もし液体の量が0のときは、


let cup = 0

<- 0

cupには、0という数量を示す数字が入っています。

ここまでは簡単ですね。

【null】コップの中身が空の状態

では本題に入りましょう。

nullとは、中身が空であることを示す、言わばラベルです。

仮に先程のコップを飲み干して中身が空になったとしましょう。
このコップは空なんだ、もう何も入ってないんだ、ということを明確に示したいとき、nullを使います。
nullを使うと以下の様に書くことができます。


let cup = null

// 結果
<- null

nullが代入されることで、cupの中身が空であることがハッキリしました。

nullは、他にも検索を行う関数で結果が見つからなかったこと示す返り値として使用されることもあります。

それに対してundefinedは、ある値がまだ定義されていない状態を示します。
定義されていない状態をあえて言い換えると、そもそも無いという状態ということです。

そもそも無いとは、具体的にはどんな状態でしょうか？
実際によくみられるパターンは、以下の３種類です。

順番に説明します。

初期化されていないことをコードで表すと以下の様になります。


let cup

cup

// 結果
<- undefined

このcupという変数は宣言はされていますが、残念ながら中身となる値が入っていません。
この状態でcupを参照するとundefinedが返ってきます。

また下記の様に変数cupに用意していないプロパティやメソッドを呼び出した場合も、undefinedが返されます。
そもそも、そういったプロパティやメソッドが用意されていない無いためです。


cup.size      // サイズは？

// 結果
<- undefined 

cup.price()  // 値段は？

// 結果
<- undefined

最後に戻り値の無い関数の結果も、undefinedとなります。
例えば下記のコードの様に、関数にreturnが無い場合、実行結果はundefinedとして返ってきます。


const func = function() {
  console.log('hello world.')
}

func()

// 結果
hello world
<- undefined

いかがだったでしょうか？
nullとundefinedの違い、理解して頂けたでしょうか？

最後まで読んでくれてありがとうございました。