JavaScriptのundefinedとは？判定やnullと違いなど

JavaScriptのundefinedについてまとめました。
undefinedについて解説した後に、下記のことについて書いています。

JavaScriptのundefinedとは？

JavaScriptのundefinedは値が未定義なことを表します。
例えば、下記のプログラムを実行するとundefinedが出力されます。

let value;

console.log(value); // undefined

最初にvalue変数を作りました。
この変数の値は、初期化していないので未定義です。

console.logで出力すると、「undefined」が返ってくることが確認できました。
このように変数に値が定義されていないと、値はundefinedになります。

また、変数の値が定義されていないとき以外にも、下記の場合にundefinedになります。

それぞれ、コードを書いて確認してみます。

戻り値のない関数が返すundefined

処理が書いてない、戻り値のなしの関数を書いてみました。

function undefinedFunc() {
}

console.log(undefinedFunc()); // undefined

最初に処理がないundefinedFunc関数を書いています。
console.logで、undefinedFunc関数を呼び出して出力するとundefinedが出力されました。

このように、関数に戻り値のない場合にはundefinedになります。

存在しないオブジェクトのプロパティにアクセス

オブジェクトを定義して、存在しないプロパティにアクセスするようにしてみました。

fruits = { apple: 'りんご', grape: 'ぶどう' }

console.log(fruits.orange); // undefined

最初にfruitsオブジェクトを定義しています。
その次の処理で、fruitsオブジェクトの存在しないorangeプロパティにアクセスしました。

console.logで出力すると、undefinedになりました。
このように、存在しないプロパティにアクセスしたときはundefinedになります。

存在しない配列要素にアクセス

最後に存在しない配列要素にアクセスしてみます。

fruits = ['apple', 'orange', 'grape'];

console.log(fruits[10]); // undefined

最初にfruits配列を3つの要素で定義しています。
その次の処理で、fruits配列の存在しない10番目にアクセスしました。

console.logで出力するとundefinedになりました。
このように存在しない配列要素にアクセスしたときにもundefinedになります。

undefinedの判定方法

undefinedか判定するときには、比較演算子の「===」を使います。
例えば、下記のようにして判定することができます。

let value;

if (value === undefined) {
    console.log('valueはundefinedです。');
}

最初にvalue変数を作っています。
値が未定義なので、undefinedになります。

次の処理のif文で、「value === undefined」として、undefinedか判定しています。
このように比較演算子の「===」を使うことで判定できます。
undefinedのときにはtrueが返ってきて、undefinedでないときにはfalseになります。

今回はundefinedなのでtrueが返ってきて、「valueはundefinedです。」を出力して処理が終わります。

比較演算子のイコール2つに注意

先ほどは、比較演算子のイコール3つで比較しました。
イコールが2つの場合には、厳密に比較しないので、nullの場合にもtrueが返ってきます。

let value = null;

if (value == undefined) {
    console.log('valueはundefinedです。');
}

先ほどのプログラムを少し修正しました。
最初にvalue変数にnullを代入しています。

そして、次の処理でイコールが2つの比較演算子で比べています。
この場合は厳密に比較しないので、undefinedでもnullでもtrueが返ってきます。

厳密にundefinedか比較したいときには、イコール3つの比較演算子「===」を使うようにしましょう。

undefinedとnullの違い

今回解説したようにundefinedは値が未定義のときに返ってきました。

nullもundefinedも、どちらも値ないことを表しています。
undefinedは値がない場合に、未定義の変数に代入されたり、システムレベルで予期していないときに自動的に使われることがありました。

nullは変数を定義したけど、空ということを明示的に表します。
そのため、プログラムレベルではnullを使った方が良さそうですが、undefinedも変数に代入することは可能です。

undefinedで比較して、バリデーションなどを書いておけば、ひとつに統一されてシンプルになりそうな気がします。
どちらを使うかに関しては、チーム内で共通認識を持っていたほうが迷うことがなくて良いかと思います。

おわりに

今回はJavaScriptのundefinedについて解説しました。
undefinedについてまとめると、下記のようになります。