【JavaScript入門】null・undefinedの代入・判定・変換まとめ！

今回は、JavaScriptで空っぽの状態を表現する「null」について詳しく学んでいきましょう！

このような内容も含めて、本記事では以下のような構成で解説していきます！

この記事で、nullをしっかり学習してスキルアップを目指していきましょう！

＞＞＞ 今すぐ「nullの使い方」を知りたい方はこちら

「null」とは？

nullとは、オブジェクトが存在しない状態のときの値です。

参考URL：
null – JavaScript | MDN

つまり、値がnullの変数は、「値が存在しない」という意味を持ちます。

整数0が整数として値を持たないという意味で用いられることと同じ意味で、nullは整数0のように、オブジェクトとして値を持たないという意味で用いられます。

例えば、String変数の値がnullの場合、「String変数に文字列は入っていない」という意味があります。String変数の値が””の場合は、「String変数の値は空文字が入っている」という意味になり、この場合空文字ではありますが、値が存在していることになります。

また、nullはリテラルとして扱われます。

実際に、コードでnullの型を確認してみましょう。

window.onload = function () {
    // nullの型の判定
    console.log('typeoof null = ' + (typeof null));
}

実行結果

typeoof null = object

以上のように、nullの型はオブジェクト型であることが分かります。

「null」の使い方

この章では、基本的な「null」の概要とその使い方について見ていきましょう！ 主に、「null」が使われるケースやよく似た「undefined」との違いについて学んでいきます。

一般的なnullを使うケース

それでは、まず最初に「null」が使われる簡単なケースから見ていきましょう！ 「null」は基本的に、以下のように変数の初期化などでよく使われます。

var sample;
var item = null;

この例では、変数「item」にnullを代入していることから、「item」は中身が空っぽの変数ということを明示しています。一方で、変数「sample」は宣言をしただけなので中身の値については未定義（undefined）の状態になります。

このように「null」は簡単に扱えるわけですが、例えばオブジェクトなどの初期値などでよく使われます。

var obj = {
    name: null  //空の状態を明示する
}

この例では、nameプロパティの初期値に「null」を設定しています。初期値を何にして良いか分からないようなケースで、「null」を設定することはよくあります。

空文字とnullは違うもの

nullは中身のない空っぽの状態を意味するわけですが、文字列が空っぽの状態を表現するのに「’ ’」空文字がよく使われます。

「空文字」と「null」は意味としては同じですが、JavaScriptのプログラミングとしては別物の扱いになるという点に注意しておきましょう。

例えば、この両者を比較してどのような結果になるかを見てみましょう！

var str = '';
var n = null;

console.log(str == null);
console.log(str === null);

実行結果

false
false

実行結果に注目してください！

「==」「===」のどちらで比較しても結果はfalseとなり、同じものではないことが分かりますね。それもそのはず、空文字はあくまでもString型でありnullとは型が違います。

var str = '';
var n = null;

console.log(typeof str);
console.log(typeof n);

実行結果

string
object

実行結果を見ると空文字はStiring型であることが分かりますね。

nullとundefinedの違いについて

今度は、「null」と「undefined」の違いについてもう少し詳しく見ていきましょう！

これまでにも解説したように、「undefined」は値が未定義の状態であることを意味するものでした。一方で「null」は値が空っぽの状態を意味するので、それぞれ意味や使われ方が違うものです。

しかし、これだけでなく他にも「型」についても知っておく必要があるのです！

例えば、次のサンプル例を見てください。

console.log( null == undefined );
console.log( null === undefined );

実行結果

true
false

この例では、「null / undefined」をそれぞれ比較した結果をコンソールに出力しています。

「==（等価演算子）」は「値」が同じかどうかを確認するもので、実行結果はtrueになっています。「===（厳密等価演算子）」は「値」と「型」が同じかどうかを確認しており、実行結果はfalseになります。

この結果から、nullとundefinedは「値」こそ同じですが「型」が異なるというのが分かりますね。そこで、それぞれの「型」を調べてみましょう！

console.log( typeof null );
console.log( typeof undefined );

実行結果

object
undefined

実行結果に注目して下さい！

「null」の型は「object（オブジェクト型）」であり、「undefined」は「undefined型」であることが分かりますね。このように、両者は使われ方の「用途」も違えば「型」も違うというわけです！

また、undefinedについてさらに知識を深めたい方は、基本から応用技までをまとめた次の記事が参考になりますよ！

「null」の代入について

変数にnullを代入した時の挙動について

nullを変数に代入するとその後、変数はどのように評価されるのでしょうか。変数とnullやundefinedとの関係はどのようなものでしょうか。

実際にコードで確認してみましょう。

window.onload = function () {
    // nullを代入しチェックする
    var val = null;
    console.log('val == null : ' + (val == null));
    console.log('val === null : ' + (val === null));
    console.log('val == undefined : ' + (val == undefined));
    console.log('val === undedfined : ' + (val === undefined));
}

実行結果：

val == null : true
val === null : true
val == undefined : true
val === undedfined : false

以上のように、変数にnullを代入すると、その後その変数は、nullと同等な扱いになります。つまり、変数はnullとして振る舞います。

変数にundefinedを代入した時の挙動について

undefinedを変数に代入するとその後、変数はどのように評価されるのでしょうか。変数とnullやundefinedとの関係はどのようなものでしょうか。

window.onload = function () {
    // undefinedを代入しチェックする
    var val = undefined;
    console.log('val == undefined : ' + (val == undefined));
    console.log('val === undedfined : ' + (val === undefined));
    console.log('val == null : ' + (val == null));
    console.log('val === null : ' + (val === null));
}

実行結果：

val == undefined : true
val === undedfined : true
val == null : true
val === null : false

以上のように、変数にundefinedを代入すると、その後その変数は、undefinedと同等な扱いになります。つまり、変数はundefinedとして振る舞います。

配列にnullを代入する方法

次に、配列データへ「null」を代入する方法について見ていきましょう！

配列の場合も単純な変数の時と同じですが、少し性質が異なる部分もあります。例えば次のサンプル例を見てください！

var items = [];

console.log( items[0] );

実行結果

undefined

この例では、配列「items」を宣言して同時に初期化を行っているのが分かります。

この状態で配列の0番目を見てみると、すでにundefinedになっているのが分かります。配列の場合は、リテラルで初期化していても値は定義されていないのでやはりundefinedになるわけです。

この初期化と同時に「null」を使って代入すると次のようになります！

var items = [ null, null, null ];

console.log( items[0] );

実行結果

null

この例では、初期化する際に3つのnullを代入しているので空のデータ3個分の配列が作られたわけです。配列データがnullになっているのは実行結果からも分かりますね。

ORを使ったnullの代入方法

「null」は論理演算子の「OR」を使った代入方法もよく使われるので解説しておきます！

OR演算子は、複数の条件から1つだけ当てはまる際に処理を行いたい場合によく使われます。今回の場合だと、任意の変数に値が無かった場合に初期値として「null」を自動的に代入するケースで使われます。

次のサンプル例を見てください！

var item;

var result = item || null;

console.log( result );

実行結果

null

この場合、変数「item」は宣言されただけで「値」は代入されていませんよね？

このような状況で「item || null」と記述すると、自動的に初期値として「null」が代入されるわけです。もちろん、何らかの値がすでに代入されていれば「null」は代入されません。

また、初期値が「null」だった場合に何らかの「値」を代入したいケースにも利用できます！

var item = null;

var result = item || 100;

この例では、初期値として変数「item」にnullが代入されています。この場合も「undefined」と同様に初期値として「100」が自動的に代入されるわけです。

「null」の変換について

nullをBoolean型の変数に変換する

nullをBoolean型に変換すると、どのような値になるのでしょうか。

実際にコードで確認してみましょう。

console.log('Boolean(null) = ' + Boolean(null));

実行結果

Boolean(null) = false

nullをBoolean型に変換すると、値はfalseになりました。これはifなどの条件式へnullを渡した際にfalseと評価された時と同じ結果になっています。

つまり、nullは「値が存在しない」という意味ですから、ifなどで評価された際には否定的な評価になるのでfalseと同等であるわけです。

nullを文字列型の変数に変換する

nullを文字列型（String型）に変換すると、どのような値になるのでしょうか。実際にコードで確認してみましょう。

console.log('String(null) = ' + String(null));
console.log('String(null) == null : ' + (String(null) == null));

実行結果

String(null) = null
String(null) == null : false

nullを文字列型に変換すると、「null」という文字列になりました。

これはJavaScriptの文字列型の特殊機能で、nullを文字列型に変換する際に値がnullであったことがわかるように「null」という文字列に変換しているためです。

変換結果があくまで文字列であり、nullとは一致していないことは上記実行結果の通りです。

nullをNumber型の変数に変換する

nullをNumber型に変換すると、どのような値になるのでしょうか。実際にコードで確認してみましょう。

console.log('Number(null) = ' + Number(null));

実行結果

Number(null) = 0

nullをNumber型に変換すると0という値になりました。0はNumber型で「（あくまでNumber型の数値計算において）値が存在しない」という意味です。

nullも「値が存在しない」という意味であることから、合理的な変換結果です。

「null」の判定について

nullとundefinedを判定する

まず最初に、nullとよく一緒に扱われるundefinedをそれぞれどのように判定すれば良いのかを見ていきましょう。

と言っても方法は簡単で、基本的には「null」「undefined」それぞれを同じ値で判定すれば問題はありません。

var n = null;
var u = undefined;

console.log(n === null);
console.log(u === undefined);

実行結果

true
true

この結果を応用すれば、次のような条件分岐処理が書けますね。

if(hoge === null || hoge === undefined) { }

これで変数「hoge」の中に「null」か「undefined」が格納されていれば、結果は「true」になるというわけです。ただし、undefinedはローカル変数として上書きできてしまうので、typeofを使った判定の方がより安心でしょう。

if(hoge === null || typeof hoge === 'undefined') { }

nullをBoolean型の変数と判定する

nullとBoolean型のtrueやfalseを、比較演算子==や!=などで比較するとどいう結果になるのでしょうか。

実際に、コードで比較してみましょう。

console.log('true === null : ' + (true === null));
console.log('true !== null : ' + (true !== null));
console.log('false === null : ' + (false === null));
console.log('false !== null : ' + (false !== null));

実行結果

true === null : false
true !== null : true
false === null : false
false !== null : true

以上のように、Boolean型のtrueもfalseもnullとは値も型もまったく違うという扱いです。

trueやfalseは意味のある値があり、「値がない」nullとは違うためです。ただし、nullをif文などの条件式として使用する際、以下のコードのように扱われます。

if (null) {
    console.log("if(null) : true");
} else {
    console.log("if(null) : false");
}
if (!null) {
    console.log("if(!null) : true");
} else {
    console.log("if(!null) : false");
}

以上のように、if文などの条件式にnullを与えるとfalseと同等の評価をされます。

nullを文字列型の変数と判定する

nullと、文字列型を比較演算子==や===で比較するとどうなるでしょうか。実際に、コードで確認してみましょう。

console.log('"" === null : ' + ("" === null));
console.log('"0" === null : ' + ("0" === null));
console.log('"A" === null : ' + ("A" === null));
console.log('"abc" === null : ' + ("abc" === null));

実行結果

"" === null : false
"0" === null : false
"A" === null : false
"abc" === null : false

以上のように、文字列はいずれもnullとは値も型も一致しません。

nullをNumber型の変数と判定する

nullと、Number型を比較演算子==や===で比較するとどうなるでしょうか。

実際に、コードで確認してみましょう。

console.log('0 === null : ' + (0 === null));
console.log('0.0 === null : ' + (0.0 === null));
console.log('1 === null : ' + (1 === null));
console.log('1.0 === null : ' + (1.0 === null));
console.log('NaN === null : ' + (NaN === null));
console.log('Inifity === null : ' + (Infinity === null));

実行結果

0 === null : false
0.0 === null : false
1 === null : false
1.0 === null : false
NaN === null : false
Inifity === null : false

以上のように、Number型の値はいずれもnullとは値も型も一致しません。

0はnullと値が一致しそうですが、「数値の0という値が存在する」という意味であり、nullは「値が存在しない」という意味なので一致しません。また、非数値であることを示すNaN（Not a Number）もnullとは値も型も一致していません。

NaNは「非数値ということを示す値」だからです。

関数におけるnullの注意点

最後に、関数で「null」を扱う際の注意点について解説しておきます！例えば、何らかの値を引数に取る関数を作成するとします。

function sample(value) {
    var item = value || 100;

    console.log( item );
}

sample();

実行結果

100

この例では、1つの引数を取る関数「sample」を作成しています。sample()を実行する際に引数を指定しなかった場合は、「||」を使って初期値に「100」を代入するようにしていますね。

ただし、意図的に「null」を指定したい場合もあります。そこで、「sample( null )」と記述して初期値を「null」にしたいと思っても、結果は「100」になってしまうわけです。

このようなケースでは、「引数を指定しなかった場合 ＝ undefined」という性質を利用すると上手く動作します。

次のサンプル例を見てください！

function sample(value) {
    var item = value;

    if(value === undefined) item = 100;

    console.log( item );
}

sample( null );

実行結果

null

この例では、先ほどと同じ関数「sample()」を作成し、その中身に「undefined」と比較する条件式を追加しています。

このように、意図的に「undefined」と比較することで引数が無かった場合に初期値「100」が代入されるわけです。これなら関数の引数に「null」を指定しても、実行結果のようにしっかりと「null」が代入できます！

nullの使い方まとめ

最後に、nullの基本的な使い方や概念についてまとめておきます。nullは「空っぽ」の状態を意味するので、変数やオブジェクトのプロパティを初期化する時によく使われます。

var item = null;

var obj = {
    name: null
}

よく一緒に扱われるundefinedも似ているのですが、こちらは「未定義である」ことを意味するものなので扱いとしては別物になります。例えば、両者を比較してみると次のようになります。

console.log( null == undefined );
console.log( null === undefined );

実行結果

true
false

普通に「==」で比較すると同じと判定されますが、「===(厳密等価演算子)」で比較するとfalseとなり型が違うので別物になるわけです。また、nullかundefinedなのかを判定するには次のような条件分岐で行えます。

if(hoge === null || hoge === undefined) { }

判定する変数「hoge」に対して、そのままnullかundefinedなのかを比較するだけで良いわけです。

まとめ

今回は、「null」と「undefined」の意味から判定、変換、代入について学習しました！

学習のポイントを振り返ってみましょう！

以上の内容を再確認し、ぜひ自分のプログラムに生かし学習を進めてください！