【JavaScript入門】undefined徹底解説！使い方や判定方法まとめ

みなさんundefinedって聞いたことありますか？

JavaScriptの値の1つなのですが、なかなか理解しづらくて、初心者が頭を悩ますことが多いテーマの一つだと思います。

今回はそんな疑問区お答えすべく、undefinedをわかりやすく解説し、あなたの頭の中のモヤモヤをスッキリさせます！

この記事は下記の流れで進めていきます。

undefinedの扱い方について正しく理解し、必要な場面で使いこなすことができるようになりましょう！

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

undefinedとは？

undefinedは、未定義であることを示す値です。

この説明だけだとちょっとわかりにくいですね。具体的な例で見てみましょう。

例えば、下記のように変数を宣言したとしましょう。

var sample;

この場合、「sample」という名前の変数を宣言したことになります。

しかしこれでは、宣言をしただけで変数の中身はありませんよね？

このような状態は「変数に値が定義されていない」という状態になります。

言い方を変えれば未定義。そう、この状態がundefinedという値になるということです。

undefinedを使う場面

では、どのような時にこのundefinedは登場するのでしょうか？

いくつかのケースをこれからご紹介します。

変数の初期値として利用する

javascriptである変数を定義したあと、その変数に代入が一度も行われていない時には、その変数にundefinedが設定されています。

具体的なサンプルで確認してみましょう。

var item;
var category = "bag";

console.log("item = " + item);
console.log("category = " + category);

実行結果

item = undefined
category = bag

サンプルコードの最初にitem、categoryという変数を宣言し、categoryは”bag”という値を入れていますが、itemは何も代入していません。

その状態で、変数の中身をコンソールにて出力してみると、itemはundefinedがセットされている事が確認できたかと思います。

このように変数の初期値としてundefinedがセットされます。

配列要素の初期値として利用する

javascriptの配列についても変数と同様に初期化した状態で各要素に値を代入していなければundefinedがセットされています。

こちらもサンプルを確認してみましょう。

var array1 = new Array();
var array2 = [ , ];

console.log( "array1[ 0 ]は" + array1[ 0 ] );
console.log( "array2[ 0 ]は" + array2[ 0 ] );

実行結果

array1[ 0 ]はundefined
array2[ 0 ]はundefined

javascriptの配列の初期化について更に詳しく知りたい方は以下の記事を参考にしてください。

>>これであなたも配列マスター！？配列を初期化する方法

関数の引数に利用する

関数で定義された引数の数に満たない形でその関数が呼ばれた場合にも、その引数にはundefinedが設定されます。

こちらもまずはサンプルからご確認ください。

function output(pref, city) {
  console.log("都道府県=" + pref + ",市区町村=" + city);
}

output("北海道");

実行結果

都道府県=北海道,市区町村=undefined

サンプルコードにある通り、output関数は引数を2つ（pref、city)受け取る形で定義されています。

しかし、prefに当たる引数のみを指定して関数を呼び出すと、第二引数(city)にはundefinedがセットされる事が確認できたかと思います。

これまでご紹介したようなケースなどでundefinedが登場しますので、初心者の方はよく覚えておくと良いでしょう。

実際の開発の場でundefinedに出会った際は、その前の処理で上記に該当するケースがないかどうか確認してみてください。

undefinedの判定方法

ここでは、目的の値がundefinedなのかどうかを判定する方法について学んでいきます。

主な判定方法は下記の3つです。

それぞれ細かく見ていきましょう！

undefined同士で比較する

値がundefinedかどうかを判定する最も簡単な方法は、条件式でundefined自体と比較する方法です。

次の例をご確認ください。

var sample;

if (sample === undefined) {

    console.log('undefinedです');

}
else {

    console.log('undefinedではありません')

}

実行結果

undefinedです

ここでIF文の条件式に注目して下さい！

undefinedの比較で使われている演算子(===)は「===（厳密等価演算子）」と呼ばれるもので「値」と「型」を比較しています。

これにより、特定の値がundefinedであるかどうかを手軽に判定することができるわけです。

typeof演算子で比較する

undefinedと直接比較する場合は、すこし注意すべき点がありましたね。

しかし、このtypeof演算子であれば、そのようなことはありません。そのため、よく利用される手法の一つです。

undefinedの値にtypeof演算子を用いると必ず”undefined”が返るという性質を利用します。

下記の例をご確認ください。

var city;

if (typeof city === "undefined") {
  console.log("cityはundefinedです。");
}

実行結果

cityはundefinedです。

void演算子で比較する

上記でご紹介した方法のほかに、void演算子を利用する方法もあります。void演算子は与えられた式に対して常にundefinedを返します。

つまり、void 0 や void “東京”など、どのような数値や文字列を与えても結果はundefinedが返ってくるのです。

この性質を利用したundefined判定は下記のようになります。

var city;

if (city === void 0) {
  console.log("cityはundefinedです。");
}

実行結果

cityはundefinedです。

サンプルコードにある”void 0”がundefinedを返すので、結果的にcity変数とundefinedを比較する処理になっています。

判定に使う厳密等価演算子(===)について

これまでの判定方法において、IF文の条件式に「===」を使っていることに気づいたでしょうか？

これは、「===（厳密等価演算子）」と言って「型」と「値」の両方が同じであるかを判定しています。JavaScriptは「==（等価演算子）」もあるのですが、undefinedを判定するときは厳密等価演算子でなければいけません。

例えば、次の例を見てください！

console.log(null == undefined);


console.log(null === undefined);

実行結果

true

false

この例では、「null」と「undefined」をそれぞれ比較しているわけですが、実行結果に注目してください！

実は、「==」で比較した場合には「null / undefined」どちらも同じものとして扱われてしまうのです。

そのため、undefinedを検出するつもりがnullも一緒に検出してしまう危険性があるので、必ず厳密等価演算子を利用するわけですね。

undefinedとnullの違い

「undefined」と「null」の違いについて、そもそもどのような用途で利用すべきなのかを補足しておきます。

一体この２つの違いはなんなのでしょうか？

冒頭でも解説しましたが、undefinedは「未定義」という意味であり「値」が定義されていない状態のことです。それに対してnullは、値が「空っぽ」の状態であることを意味しています。

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

var sample;
var test = null;

console.log( sample );
console.log( test );

実行結果

undefined
null

この例では、変数「sample」と「test」があります。変数「sample」は宣言をしただけで「値」は定義されていません。

そのため、実行結果には未定義を意味する「undefined」が出力されていますね。変数「test」は宣言をしたうえで「値」として「null」を定義していますね。そのため、実行結果には値が空っぽであることを意味する「null」が出力されています。

つまり、プログラマーが変数の初期値として意図的に値が無い状態を意味するかどうかを決められるのが「null」の役割と言えるでしょう。

もっと簡単に言えば、undefinedとnullの違いは「値が空である」ことを意図的に表しているかどうかなのです。

undefinedへの代入について

最後に、undefinedの重要な特性について解説しておきます！

undefinedはJavaScriptにおける予約語ではないのですが、通常は値を代入することはできないようになっています。

次の例を見てください！

var undefined = 0;

console.log( undefined );

実行結果

undefined

この例では、undefinedとまったく同じ変数名を作成し「0」を代入しています。

しかし、コンソールログに出力すると「0」ではなくundefinedになっているのがわかりますよね？これは、undefinedには代入（上書き）を許可しないというJavaScriptの仕様なのです。

では、関数内で同じことをするとどうなるでしょうか？

下記の例では、関数「test()」の中でundefinedと同じ変数名を作成して「0」を代入しています。

function test() {
    var undefined = 0;
    
    console.log( undefined );
}

test();

実行結果

０

実行結果を見ると、undefinedの値に「0」が代入（上書き）できていますね。

重要なポイントは、グローバル変数の場合だけは値の代入（上書き）ができないということです。

そのため、関数などグローバル変数にならない状況ではなるべくundefinedという名前の変数は使わないようにしましょう！

undefinedのまとめ

最後に、undefinedの基本についてまとめておきます。

まず、undefinedが利用されるケースを見てみましょう！

undefinedは基本的に、変数の初期値、配列の初期値、関数の引数としての初期値に使われています。

var item;
var array1 = new Array();


function output(sample) {
  console.log(sample);
}


console.log(item);
console.log(array1[0]);
output();

実行結果

undefined
undefined
undefined

実行結果がすべてundefinedになっている点に注目してください！これは、変数や配列などが宣言された時点でJavaScriptが自動的にundefinedを定義するからなのです。

その後、プログラマーが意図的に「値」を定義することで変数や配列の値が決まっていくわけですね。

undefinedを判定（検出）するには、必ず「===（厳密等価演算子）」を使って比較する必要があります。

var sample;

console.log(sample === undefined);

実行結果

true

「==（等価演算子）」だとnullも同じ値として判定してしまうので注意しましょう。

また、typeof演算子を利用した判定も可能です。

var city;

console.log(typeof city === "undefined");

実行結果

true

typeofは変数などの「型」を取得することができるので、値が未定義の場合は「undefined型」を取得できるわけです。

これを条件式に応用すれば同じようにundefinedを判定することができますね。

まとめ

今回は、JavaScriptにおける「未定義」を意味するundefinedについて学習をしました。

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ活用してくださいね！