はじめに

undefinedってなんだろう…　　

中身がない？ってことなんだろうけど…どういうこと？　　

そんな基本的な知識ない自身の疑問を調べてメモしました。

未定義値(undefined) ってなに？

JavaScriptでは初期化されていない変数には全て「undefined」という値が入っています。

(値が入る前の初期値ってことか…？)

未定義値(undefined)とは、ある変数の値が定義されていないことを表す値で以下のようなケースで返されます。

const x;
const obj = { a:12345 };

console.log(x); //結果:undefined (値が設定されていない)
console.log(obj);　//結果:undefined (プロパティが設定されていない)

単純に書くとこんな感じにundefinedになります。

これを利用して変数が定義済みかどうかを判別することが可能です。


if (x === undefined) {
  console.log( 'xは未定義' );
}

グローバル変数として、そのままundefinedという名前の変数が用意されているのでそれと比較するやり方。
一番素直なやり方ですがJavaScriptにおいてはよくない書き方とされています。

undefinedは予約語ではなく、単なる変数です。なので上書きもできるし関数スコープ内で同名のローカル変数を作ることもできます。（ただし最近はconst扱いになって上書きできなくなっているようです）
なので文脈によらず、必ず確実にundefined判定するためにはこの書き方は適さないと言えます。

そこでよく使われるのがtypeofを使うやり方です。
undefined値にtypeof演算子を作用させると必ず"undefined"という文字列が返るためそれと比較することで判定を行います。

if(typeof x === "undefined") {
  console.log( 'xは未定義' );
}

void 0はあらゆる値に作用し、常にundefiedを返す演算子です。文脈によらずundefinedを受け取れるので、安全確実です。

if(x === void 0) {
  console.log( 'xは未定義' );
}

undefined値に「！」を作用させるとtrueが返るため、これを利用するやり方もあります。
しかし,falseや０もundefined扱いになってしまうので注意が必要です。
undefinedを厳密に判別する必要がある場合は使えないが、理解して使うのであればマル。


if(!x) {
  console.log( 'xはfalseか０かundefinedかnull' );
}

nullはundefinedと違って予約語です。どの文脈でも確実にnullが入っているので安心して使えます。
「===」を使わず「==」を使っているのがポイントですね。
これも「！」と同じく完全な判定には使えませんがより厳密になります。

if(x == null){
  console.log( 'xはundefinedかnull' );
}

他にも判定の仕方は色々あるようなので参考までに
…