JavaScriptのundefinedとnullの違いと判定方法を解説!
JavaScriptのundefinedとnullという似ているが厳密には異なる両者の違いと判定方法をサンプルコード付きで解説していきます。
JavaScriptではundefined
とnull
という値があります。どちらも「値が無い」ことを表しますが厳密な意味は異なります。
しかし時にundefined
を判定したいときにnull
との比較をしたりなど理解がごちゃごちゃになる場合があります。
そこで今回はJavaScriptのundefined
とnull
の違いをしっかり解説していきます。またundefined
とnull
の判定方法についても解説していきます。
JavaScriptのundefinedとnullの違い
それではまずJavaScriptのundefined
とnull
のそれぞれの意味を見ていきましょう。
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の判定方法
それでは次にundefined
とnull
の判定方法をそれぞれ解説していきます。
たまにundefined
もnull
も関係なくif
文に突っ込んで判定している例を見ますが、バグの元ですので、ここでしっかりと両者の判定方法を覚えて使い分け出来るようにしておきましょう。
undefinedを判定する
ここではundefined
の判定で一番よく利用されるtypeof
演算子を使った判定方法を紹介します。
typeof
演算子を使ったundefined
の判定方法は下記となります。
typeof演算子を利用したundefined値の判定
if( typeof tmp === 'undefined'){
console.log("true");
}else{
console.log("false");
}
// trueが返る
typeof
演算子は対象となるデータ型を表示するもので、ここでは未定義の変数tmp
はundefined
値で、typeof tmp
は文字列のundefined
を返します。
あとはif文で条件分岐させているだけです。
また今回紹介したtypeof
演算子のやり方以外にもundefined
を判定する方法があります。詳細を知りたい方はぜひ下記を参考にしてみて下さい。
nullを判定する
続いてnull
を判定してみましょう。null
を判定するサンプルコードは下記となります。
nullの判定
var name = null;
if( name === null ) {
console.log("true");
}else{
console.log("false");
}
// trueが返る
null
は===
で比較することで厳密に判定が出来ます。
undefinedかnullであることを判定したい
次にundefined
かnull
であること(どちらでもいいがどっちかであること)を判定したい場合を見ていきましょう。
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
になるのが気になりますよね。
この点もう少し掘り下げてみましょう。
undefined
とnull
自身を比較した下記のサンプルを見てみましょう。
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
が返ります。つまり==
の場合はundefined
とnull
は同じという判定になります。そのため先のサンプルコードでイコール2つでundefined
とnull
は同じ結果となったのです。
もちろん厳密に考えると両者は異なるものですが、イコールが2つの比較では同じと判定されます。この点に注意しましょう。
厳密にundefined
とnull
を比較する必要がある時は必ずイコールを3つ使いましょう。そもそもundefined
とnull
が同一と扱われるのが気持ち悪いという方は最初からイコールを3つというのをルールとして定めておきましょう。
まとめ
いかがでしたでしょうか。JavaScriptのundefined
とnull
の違いやそれぞれの判定方法について解説しました。
意味は似ているが厳密には異なる両者ですが、しっかりとその違いや判定方法をマスターしておきましょう!