JavaScriptでundefinedを判定する方法6選 | typeofとvoid 0がおすすめ

みなさんこんにちは！

今回の記事は、

というお悩みを解決する記事になっています。

分かりやすく簡潔に解説していきますので、ぜひ最後までご覧くださいね。

JavaScriptを学び直すなら最新の第7版がおすすめ

2022年ITエンジニア大賞を受賞した話題本

undefinedとは？

まずは、JavaScriptにおけるundefinedの意味について解説しましょう。

undefinedは、「未だ定義されていない」という意味を持つ英単語です。

JavaScriptにおいては、変数を宣言した後に値を設定されていない場合にundefinedが返されます。

以下のサンプルコードをご覧ください。

let a = 0; // 0で初期化
let b;     // 初期化しない場合はundefinedが設定される

console.log(a); // 結果：0
console.log(b); // 結果：undefined

b = 1;

console.log(b); // 結果：1

変数aは、宣言と同時に0を代入して初期化しているのに対し、変数bは初期化を行っていません。

ブラウザの開発者ツールで確認すると、変数aは0が出力されているのに対し、変数bはundefinedが出力されていることが分かります。

その後、変数bに1を代入することでundefinedは消滅します。

また、以下のサンプルコードのように、関数のreturnに何も値を設定しない場合にも、undefinedが返されます。

function func() {
  return; // 何も値を設定しない
}

console.log(func()); // 結果：undefined

undefinedとnullの違いについて

undefinedと似た値として、nullが存在します。

nullは、JavaScriptを含む多くのプログラミング言語で、「何もない」ことを意味する値です。

単語だけ見れば、undefinedとnullは非常に似ていますが、大きな違いは、何もない状態であることが意図的であるかどうかです。

例えば、ショッピングサイトで商品名をキーワードとして検索したときに、該当する商品がなかったとします。

この場合に「該当する商品がなかった」ことを結果として返すために、nullが使われます。

したがってnullは、プログラムを作成する際に開発者が意図的に設定することが多いです。

一方undefinedは、変数に値を設定しなかったり関数の戻り値を何も設定しなかったときに自動的に設定されます。

ショッピングサイトの場合と違って、意図的に変数や関数の戻り値に値を設定しないことは通常あり得ないため、意図的ではありません。

nullやundefinedが混合してしまうと、思わぬバグが入り込んでしまうため、開発時には両者の違いを意識することが、ソースコードの品質を上げる1つのポイントです。

あわせて読みたい

【Javascript】nullを判定する3つの方法をご紹介します！

今回の記事は、 Javascriptの「null」って何？nullと他の値の違いは？nullとundefinedの違いが分からない というお悩みをお持ちの方に向けた記事になっています。 Javascriptには様々なデー[…]

JavaScriptでundefinedを判定する方法

つづいて、JavaScriptでundefinedを判定する方法について解説します。

判定方法には、以下の6種類が存在します。

• 等価演算子でundefinedを判定する【非推奨】
• typeof演算子でundefinedを判定する【おすすめ】
• void 0と比較してundefinedを判定する【おすすめ】
• 論理否定演算子でundefinedを判定する【非推奨】
• 等価演算子でnullと比較する【非推奨】
• 自分でundefinedを定義する【非推奨】

等価演算子でundefinedを判定する【非推奨】

1つ目は、等価演算子を使って判定する方法です。

等価演算子とは、ある2つの値を比較して等しいかどうかを判定するために使われる記号です。

数学では、両辺が等しいことを示すのにイコール（=）を使いますが、JavaScriptではイコール2つ（==）または3つ（===）を使います。

特に、undefinedであるか否かを判定する場合は、イコール3つ（===）で比較するようにしましょう。

イコール3つの等価演算子を、JavaScriptでは厳密等価演算子と言います。

以下のサンプルコードをご覧ください。

let letiable;

// 等価演算子（==）による比較
console.log("判定:" + (letiable == undefined)); // 結果：判定:true
// 厳密等価演算子（===）による比較
console.log("判定:" + (letiable === undefined)); // 結果：判定:true

letiable = 123;

// 等価演算子（==）による比較
console.log("判定:" + (letiable == undefined)); // 結果：判定:false
// 厳密等価演算子（===）による比較
console.log("判定:" + (letiable === undefined)); // 結果：判定:false

letiable = null;

// 等価演算子（==）による比較
console.log("判定:" + (letiable == undefined)); // 結果：判定:true
// 厳密等価演算子（===）による比較
console.log("判定:" + (letiable === undefined)); // 結果：判定:false

等価演算子を使ったundefined判定で重要なポイントは、15行目のように変数にnullが設定されている場合です。

イコールの個数によって判定結果が異なることが分かります。

ただし、等価演算子を使ってundefinedを判定する方法はおすすめしません。

というのも、JavaScriptにおけるundefinedはただの変数なので、やろうと思えば自由に書き換えられるためです。

let a
undefined = "hoge"

if (a === undefined) {
	// undefinedの中身が"hoge"なので、こちらの処理は走りません
} else {
	// undefinedの中身が"hoge"（a === undefinedはfalse）なので、こちらの処理が走ります
}

実際にundefinedを書き換えるプログラムはないとは思いますが、万が一のことを考えると、以下でおすすめするtypeof演算子やvoid 0を使った方法の方が安全性が高いと言えます。

typeof演算子でundefinedを判定する【おすすめ】

2つ目は、typeof演算子を使って判定する方法です。

typeof演算子は、変数のデータ型を文字列で返す機能を持ち、「typeof 変数」のように記述します。

undefinedな変数にtypeof演算子を作用させた場合は、undefinedが文字列として返されるため、これを利用して判定処理を実装します。

let letiable;

// typeofによる判定（typeofは文字列であることに注意）
console.log("判定:" + (typeof letiable == 'undefined')); // 結果：判定:true

// 以下の文は、値としてのundefinedと比較しているので正常に判定されない
console.log("判定:" + (typeof letiable == undefined)); // 結果：判定:false

letiable = 123;

console.log("判定:" + (typeof letiable == 'undefined')); // 結果：判定:false

letiable = null;

console.log("判定:" + (typeof letiable == 'undefined')); // 結果：判定:false

特に注意すべきポイントは、7行目です。

undefinedをそのまま記述した場合、文字列とundefinedを比較することになり、結果がfalseとなってしまいます。

先程も述べたように、typeof演算子は文字列が返されるので、undefinedをシングルコーテーション、またはダブルコーテーションで囲むようにしましょう。

void 0と比較してundefinedを判定する【おすすめ】

3つ目は、void 0を使う方法です。

void 0は、前後の文にかかわらず常にundefinedを返す演算子です。

したがって、void 0と厳密等価演算子を組み合わせて、undefinedであるか否かを判定する処理を実装できます。

console.log(void 0); // 結果：undefined

let letiable;

// void 0による判定
console.log("判定:" + (letiable == void 0)); // 結果：判定:true
console.log("判定:" + (letiable === void 0)); // 結果：判定:true

letiable = 123;

console.log("判定:" + (letiable == void 0)); // 結果：判定:false
console.log("判定:" + (letiable === void 0)); // 結果：判定:false

letiable = null;

console.log("判定:" + (letiable == void 0)); // 結果：判定:true
console.log("判定:" + (letiable === void 0)); // 結果：判定:false

「3.1 等価演算子でundefinedを判定する」でも解説したように、等価演算子で比較する際は、イコールが3つの厳密等価演算子（===）で比較するようにしましょう。

なお、void 0の0の部分を他の値に置き換えても、常にundefinedが返されます。

実際にはJavaScriptの慣習として「0」とすることが多いです。

論理否定演算子でundefinedを判定する【非推奨】

4つ目は、論理否定演算子（!）を使う方法です。

undefinedが設定されている変数に対して論理否定演算子を作用させると、trueとなります。

一方で数値や文字列が設定されている場合はfalseとなります。

この仕組みを利用して、undefinedであるか否かを判定可能です。

let letiable;

// 論理否定演算子(!)による判定
console.log("判定:" + (!letiable)); // 結果：判定:true

letiable = 123;

console.log("判定:" + (!letiable)); // 結果：判定:false

letiable = "abc";

console.log("判定:" + (!letiable)); // 結果：判定:false

letiable = null;

console.log("判定:" + (!letiable)); // 結果：判定:true

letiable = "";

console.log("判定:" + (!letiable)); // 結果：判定:true

注意点すべきポイントは、nullや空文字が設定されている場合、undefinedと同じくtrueとなることです。

そのため、厳密にundefinedのみを判定したい場合には、こちらの方法はおすすめできません。

等価演算子でnullと比較する【非推奨】

続いてご紹介するのは、等価演算子でnullと比較することでundefinedを判定する方法です。

if (a == null) {
  console.log("aはundefinedかnullです")
}

上記の通り、等価演算子を使って「a == null」をすることで、aがnullかundefinedかを判定することができます（※「a === null」とすると、nullかどうかを判定します）。

論理否定演算子を使う方法と比べてその範囲は狭まりましたが、nullとundefinedを厳密に判定することはできません。

undefinedだけを判定したい場合には、前述のtypeof演算子やvoid 0を使用するようにしましょう。

自分でundefinedを定義する【非推奨】

こちらは、「等価演算子でundefinedを判定する【非推奨】」でご紹介した、undefinedが自由に書き換えられるという欠点をカバーするための方法になります。

具体的には、下記のように即時関数の引数に設定することで、undefinedが確実に定義されている状態で判定に利用できるようになります。

(function(undefined){
  // このブロック内では、undefinedには確実にundefined値が入っています
  if (a === undefined) {
    console.log("true")
  } else {
    console.log("false")
  }
})()

上記の方法は、undefinedを判定するための安全な方法ではあるのですが、如何せん、わざわざ関数を定義するのが面倒です。

これであれば、前述のtypeof演算子やvoid 0を使用した方が分かりやく簡潔にかけるかなと思います。

まとめ：JavaScriptでundefinedを判定するにはtypeofかvoid 0を使う

さて、ここまでJavaScriptでundefinedを判定する方法について解説してきましたがいかがでしたか？

JavaScriptでundefinedを判定するには、6つの方法が存在していますが、私がおすすめするのは以下の2つの方法です。

• typeof演算子でundefinedを判定する
• void 0を使ってundefinedを判定する

しっかりとundefinedを判定できるようになると、安全かつ品質の高いプログラムを開発できるようになりますので、今回ご紹介した内容をしっかりマスターしておいてくださいね。

このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。

最後まで読んでいただきましてありがとうございました。

JavaScriptを学び直すなら最新の第7版がおすすめ

2022年ITエンジニア大賞を受賞した話題本