Language
日本語
English

Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

  1. Home
  2. JavaScriptIntermediate - null and undefined

null and undefined - Japanese Only

みなさまどうも。

続きまして『null』と『undefined』についてやっていきましょう。『null』と『undefined』はこれまでの当サイトの記事でもちょいちょい出てきている言葉です。こちらを再確認していきたいと思います。

『null』は「ヌル」(ナル)って読みます。英語の発音的には「ナル」が近いのですが日本では「ヌル」が一般的な気がします。『undefined』は「アンディファインド」になりますね。

まず『null』から解説していきますが、『null』は『何のデータ(値)も存在していない状態』を表現している値になります。「何もないよ!」といった感じですね。

値が存在しないならば『0』とかでいいんじゃないかな、と思うかもしれませんがプログラミングでは『0』も意味を持つのでそれとは別に『null』という値が用意されているといったような考えでOKです。

では軽く記述してみましょう。JavaScriptでは『null』という値が用意されているので『"』や『'』で括る必要はありません。代入などさせたい場合はそのまま記述してしまってOKです。

var x = null; // 文字列ではないのでそのまま『null』と記述してしまってOKです。

console.log(x); // 『null』と出力されます。

JavaScriptでの『null』の使い道は主に『getElementById()』や『querySelector()』と組み合わせて使用されることが多いです。

『getElementById()』や『querySelector()』を実行させた時、要素が見つからないと『null』が返ってくるのでしたね。

『null』は『false』扱いになります。なのでそれを利用して処理を終了させる、といった処理はよく使われます。以下のような感じですね。

function changeColor(id, color){ // 要素の文字色を変更する処理です。
    var x = document.getElementById(id); // 要素を取得します。要素が取得できなかった場合『null』が返ってきます。
    if(x){ // 変数『x』が『null』だった場合はfalse扱いとなりますのでこのif文は実行されません。なので要素が見つからなかった場合でもエラーが起こらなくなります。
        x.style.color = color;
    }
}

『null』は他のプログラム言語でも同じような感じで実装されています。Rubyでは『nil』が該当しますね。使い方は大体同じなので特にこんがらがることもないかと思います。

では続いて『undefined』という値についてです。これは『未定義』を意味する値になり、『null』と同じく『undefined』も『false』扱いになります

『undefined』は他のプログラム言語では実装されていないJavaScript特有の値と思って頂いて問題ないです。なので他の言語と組み合わせて使用する場合、『undefined』という値をそのまま渡すことはできませんのでご注意ください。

JavaScriptでは『null』と同じく『undefined』という値も用意されていますので記述する際は『"』や『'』で括る必要はありません。

var x = undefined; // 文字列ではないのでそのまま『undefined』と記述してしまってOKです。

console.log(x); // 『undefined』と出力されます。

『undefined』の使い方は、変数などの定義に使用されることが多いです。

変数などを定義したあと、何も代入していない状態、つまり初期値を設定していない状態だと『undefined』が返されます。

なので以下のサンプルのように引数に何も代入されていない場合は処理をエスケープさせる、といった構築が可能です。以下は引数に何も渡さないと仮引数が『undefined』になるという挙動を利用した処理になります。

function hoge(text){
    if(text){// 引数に何も渡していない場合、このif文は実行されません。
        console.log(text);
    }
}
hoge(); // 引数に何も渡していないので処理はされません。

その他、前回の記事で解説した『return文』を書いていない関数などでも『undefined』が返ってきますね。

と、『null』と『undefined』についてはこんな感じになります。実装的な観点からみるとどちらも使い勝手は対して変わらないですね。あまり差を感じません。

『null』か『undefined』、どちらかを使用しなくてはならない場合はどちらが良いのか、というと参考書などでは『null』を使うように、とかいてあることが多いですが、正直どちらでも良い気がします。

どちらも『false』扱いになりますのであまり意識することなくif文などと組み合わせて使用できるかと思います。

というわけで以上となります。続いての記事では『ホイスティング』について解説していきたいと思います。引き続き頑張っていきましょう。ではー。

This article was written by Sakurama.

Author's beloved small mammal

桜舞 春人 Sakurama Haruto

A Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him.

If you find any errors or copyright issues, please .