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

みなさんこんにちは!

今回の記事は、

悩みを抱えた人
・undefinedってなに?
・JavaScriptでundefinedを判定するにはどうしたらいいの?
・undefinedとnullの違いがわからない…

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


この記事の内容

・undefinedとは?
・undefinedとnullの違い
・JavaScriptでundefinedを判定する方法【6つご紹介します】


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

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」って何?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を使用した方が分かりやく簡潔にかけるかなと思います。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

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

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

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

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

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

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

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