読者です 読者をやめる 読者になる 読者になる

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

JavaScriptのnullとundefinedとは?

JavaScript

スポンサードリンク

AngularJS触っていると、当たり前だけどJSも触る。んで、この辺勉強不足なので、調べたことメモ。

nullとは?

言わずともわかるプログラミング言語でみんながチェックするのに苦労する値。

動的言語は値が取れずブラウザ画面を真っ白にしたり、Javaではコンパイル後の動作確認でエラーを吐いてプロセス停止したりと散々。

これがJavaScriptにも実装されています。

Google Developer Toolのコンソールで確認するとこんな感じ。

> null
null

> typeof null
"object"

JSのnullは「オブジェクトが存在しない」とうことを表す特別な「オブジェクト」です。他の言語同様、単純に「値がない」という認識でもおkだと思う。

条件分岐ではnullfalseに自動変換される。しかし、論理値の比較ではfalseではない。

> if (! null) { console.log('false!'); }
false!

> null == false
false

また、nullをチェックするにはnullで比較すればおk

> var test = null
> test === null
true

undefined

defineは「定義するという意味」。undefinedは「未定義」ということだ。

JSでは初期化されていない値、存在していないオブジェクトやプロパティ、配列の要素を読みだしたときの値が未定義にあたります。んで、エラーになると。

> test // 定義していない変数を呼び出す
Uncaught ReferenceError: test is not defined(…)

> new TestObject() // 定義していないクラスをインスタンス化する
Uncaught ReferenceError: TestObject is not defined(…)

> TestObject = function() { console.log(v); } // 関数を用意。しかし、変数`v`は未定義
> var testObj = new TestObject(); // インスタンス化
Uncaught ReferenceError: v is not defined(…)TestObject

> TestObject = function(v) { console.log(v); } // 関数に引数を用意
> var testObj = new TestObject(); // インスタンス化。だけど、引数無し
undefined // エラーは発生せず、`undefined`が表示される

undefinedの判定はundefinedで確認しましょう。

> undefined == undefined
true

> undefined === undefined
true

> undefined == 'undefined'
false

> undefined === 'undefined'
false

文字列は同じじゃないようだ( ´ー`)フゥ

nullとundefinedの比較

どうやら「値がない」と「未定義」は同じっぽい。

しかし、型チェックでやると違う型と認識されるため、やっぱりそれぞれで比較したほうが良い。

> null === undefined
false

> null == undefined
true

まとめ

undefinedは予期せぬエラーが発生したという認識を持つべき。nullはプログラムレベルで予定通りの値が入ったという認識を持ってよい。なので、関数に「値がない」という値を渡す場合はnullを使いましょう。