JavaScriptのundefinedとnullの違いと判定方法を解説!

JavaScriptのundefinedとnullという似ているが厳密には異なる両者の違いと判定方法をサンプルコード付きで解説していきます。

コンテンツ [表示]

  1. 1JavaScriptのundefinedとnullの違い
  2. 1.1undefinedとは
  3. 1.2nullとは
  4. 2undefinedとnullの判定方法
  5. 2.1undefinedを判定する
  6. 2.2nullを判定する
  7. 2.3undefinedかnullであることを判定したい
  8. 3まとめ

JavaScriptではundefinednullという値があります。どちらも「値が無い」ことを表しますが厳密な意味は異なります。

しかし時にundefinedを判定したいときにnullとの比較をしたりなど理解がごちゃごちゃになる場合があります。

そこで今回はJavaScriptのundefinednullの違いをしっかり解説していきます。またundefinednullの判定方法についても解説していきます。

JavaScriptのundefinedとnullの違い

それではまずJavaScriptのundefinednullのそれぞれの意味を見ていきましょう。

undefinedとは

undefined未定義を意味します。つまり変数が宣言され、値が代入される(初期化)前の状態を表します。

未定義

var tmp;
console.log(tmp);
// undefinedが表示

またオブジェクトの場合はオブジェクトに存在していないプロパティを参照しようとしたときにもundefinedとなりますし、配列でも同様に存在しないインデックスの値を参照しようとしたときにundefinedとなります。

オブジェクトと配列でundefinedとなる例

// オブジェクトのプロパティ
var tmp = {};
console.log(tmp.name);

// 配列の値
var arr = [];
console.log(arr[10]);

// いずれもundefinedが表示

nullとは

nullは値が存在しない事を表す特別な値です。

つまりundefinedの未定義という意味ではなく、nullは文字列や数値などの値を返すものが無い時に意図的に使われる値です。

nullの例

var name = null;
console.log(name);
// nullが返る

ちなみにnullと空文字は異なりますので注意しましょう。

nullと空文字

// nullを代入
var name = null;

// 空文字を代入
var name2 = "";

// 表示
console.log(name);  // nullが返る
console.log(name2); // ""が返る

undefinedとnullの判定方法

それでは次にundefinednullの判定方法をそれぞれ解説していきます。

たまにundefinednullも関係なくif文に突っ込んで判定している例を見ますが、バグの元ですので、ここでしっかりと両者の判定方法を覚えて使い分け出来るようにしておきましょう。

undefinedを判定する

ここではundefinedの判定で一番よく利用されるtypeof演算子を使った判定方法を紹介します。

typeof演算子を使ったundefinedの判定方法は下記となります。

typeof演算子を利用したundefined値の判定

if( typeof tmp === 'undefined'){
  console.log("true");
}else{
  console.log("false");
}

// trueが返る

typeof演算子は対象となるデータ型を表示するもので、ここでは未定義の変数tmpundefined値で、typeof tmpは文字列のundefinedを返します。

あとはif文で条件分岐させているだけです。

また今回紹介したtypeof演算子のやり方以外にもundefinedを判定する方法があります。詳細を知りたい方はぜひ下記を参考にしてみて下さい。

あわせて読みたい
JavaScriptでundefined値かどうか判定する方法を解説!のイメージ
JavaScriptでundefined値かどうか判定する方法を解説!
JavaScriptでundefined値かどうか判定する方法をサンプルコード付きで解説していきます。typeof演算子やvoid 0を使った方法など複数紹介します。

nullを判定する

続いてnullを判定してみましょう。nullを判定するサンプルコードは下記となります。

nullの判定

var name = null;

if( name === null ) {
  console.log("true");
}else{
  console.log("false");
}
// trueが返る

null===で比較することで厳密に判定が出来ます。

undefinedかnullであることを判定したい

次にundefinednullであること(どちらでもいいがどっちかであること)を判定したい場合を見ていきましょう。
 

undefinedかnullであることを判定

// undefined
var tmp;
// null
var tmp2 = null;

if( tmp == null ) {
  console.log("true");
}else{
  console.log("false");
}
// →true

if( tmp2 == null ) {
  console.log("true");
}else{
  console.log("false");
}
// →true

上記のサンプルでは変数がundefinedでもnullでもtrueが返ります。特にundefinedの時にtrueになるのが気になりますよね。

この点もう少し掘り下げてみましょう。

undefinednull自身を比較した下記のサンプルを見てみましょう。

undefinedとnullを比較

// ==で比較
if( undefined == null ) {
  console.log("true");
}else{
  console.log("false");
}
// →true

// ===で比較
if( undefined === null ) {
  console.log("true");
}else{
  console.log("false");
}
// →false

上記のサンプルでは前者がtrueで後者でfalseが返ります。つまり==の場合はundefinednull同じという判定になります。そのため先のサンプルコードでイコール2つでundefinednullは同じ結果となったのです。


もちろん厳密に考えると両者は異なるものですが、イコールが2つの比較では同じと判定されます。この点に注意しましょう。

厳密にundefinednullを比較する必要がある時は必ずイコールを3つ使いましょう。そもそもundefinednullが同一と扱われるのが気持ち悪いという方は最初からイコールを3つというのをルールとして定めておきましょう。

まとめ

いかがでしたでしょうか。JavaScriptのundefinednullの違いやそれぞれの判定方法について解説しました。

意味は似ているが厳密には異なる両者ですが、しっかりとその違いや判定方法をマスターしておきましょう!

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次