JavaScriptで変数の未定義エラーを防ぐ方法【typeof演算子】

長いコードを書いていると、変数を定義したかあやふやになってしまうことがありますよね。そのままコードを実行すると、変数の未定義でエラーが発生してしまいます。

今回ご紹介するのは、そんなエラーを未然に防ぐ

JavaScriptで変数が定義されているかチェックする方法

について。実用例と一緒にご紹介します。

変数が定義されていないと・・・

まずはエラーのチェックをしていきましょう。例えば、以下のコードを実行しようとすると次のようなエラーが発生します。

console.log(num1 + num2);
^
ReferenceError: num1 is not defined
at Object.<anonymous> (/workspace/Main.js:4:13)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47

「num1」に差し掛かった時点で、『num1が定義されていません』というエラーが発生しています。

ReferenceErrorは、まだ未定義の変数が参照されたときに表示されるエラーメッセージです。変数が未定義なので、コードを実行することが出来ません。

またnum1 is not definedという英文からも、num1が見つからないというのが分かります。

MEMO
エラーの確認はGoogle翻訳がおすすめです。エラー文をそのままコピー&ペーストし、翻訳結果を確認するとよりエラーが解消しやすくなります。

変数が定義されているか判定するtypeof演算子

typeof演算子の使い方

typeof演算子は、オペランド(被演算子:演算子以外の数値や値)を評価する演算子です。

typeof演算子はメソッドのように括弧で括っても、括らなくても利用可能です。

typeof演算子が返す型

返す値
Undefined undefind
Null object
真偽値 boolean
数値 number
文字列 string
Functionオブジェクト function
実行例

先ほど表でご紹介した値を実際に使用してみました。実行結果では表と同じように値が表示されています。

undefined
object
boolean
boolean
number
string
function

では一番最初にエラーが発生していたnum1を入れてみましょう。未定義の変数なので、値はundefinedになります。

宣言と定義の違い

余談ですが、宣言と定義の違いをご存じですか?

  • 宣言:変数の【型】や【名前】を定義する
  • 定義:宣言した変数に具体値を入れる

今回紹介したtypeof演算子は、未定義の変数』を判定するので、宣言だけを行った変数もundefinedを返します。

そのため以下のようなコードを実行すると、どちらもundefinedになるのです

typeof演算子の実用例

ではtypeof演算子を使って、実用的なプログラムを作成してみましょう。ここでは足し算を計算する関数calc_addと、掛け算を計算する関数calc_multiを作成しました。引数では数値を2つ受け取れるようになっています。

中では条件分岐で、undefinedの場合とobjectの場合には処理を行わず、それ以外の場合のみ処理するように定義しています。

&&は「かつ」という意味を持つ論理演算子で、条件1AND条件2を一行で定義することが出来ます。

コードをもっと簡略化する

typeof演算子には数字や文字列を判定する機能もあるので、先ほどのコードを少し書き換えてみましょう。

if文の中では判定値がnumberの場合にのみ、演算を実行するように条件を書き換えてあります。こうすることでより簡略化したコードを書くことが出来ました。

まとめ

今回はJavaScriptで未定義の変数によるエラーを事前に防ぐ方法をご紹介しました。

実際に長いプログラムを書いていると感じると思いますが、エラーが発生してしまうと途中でプログラムが止まってしまい、処理を完了することが出来ません。

この未処理のエラーに対処できるのがtypeof演算子なのです。JavaScript学習中の方は、ぜひ活用してみてくださいね。

参考文献:
typeof演算子 – MDN Web Docs

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?