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

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

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

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

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

1 変数が定義されていないと・・・
2 変数が定義されているか判定するtypeof演算子
3 typeof演算子の実用例
4 まとめ

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

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

console.log(num1 + num2);

1	console.log(num1 + num2);

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 オペランド
typeof (オペランド) //どちらでも可

1 2	typeof オペランド typeof (オペランド) //どちらでも可

typeof演算子が返す型

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

実行例

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

console.log(typeof hensu); //未定義の変数

var hensu2 = null;
console.log(typeof hensu2); //null値が入った変数

console.log(typeof true); //真偽値
console.log(typeof false);

console.log(typeof 2); //数値

console.log(typeof "Hello,world!"); //文字列

function num(){};
console.log(typeof num); //関数

console.log(typeof hensu); //未定義の変数

var hensu2 = null;

console.log(typeof hensu2); //null値が入った変数

console.log(typeof true); //真偽値

console.log(typeof false);

console.log(typeof 2); //数値

console.log(typeof "Hello,world!"); //文字列

function num(){};

console.log(typeof num); //関数

undefined
object
boolean
boolean
number
string
function

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

console.log(typeof num1); //undefined

1	console.log(typeof num1); //undefined

宣言と定義の違い

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

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

var hensu; //変数の宣言
hensu = 24; //定義

1 2	var hensu; //変数の宣言 hensu = 24; //定義

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

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

var hensu;

console.log(typeof hensu); //未定義の変数
console.log(typeof num); //未宣言・未定義の変数

var hensu;

console.log(typeof hensu); //未定義の変数

console.log(typeof num); //未宣言・未定義の変数

typeof演算子の実用例

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

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

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

function calc_add(num1,num2) {
    if(typeof num1 == undefined && typeof num2 == undefined) {
        
    } else if (typeof num1 == object && typeof num2 == object) {
        
    } else {
        console.log(num1 + num2);
    }
}

function calc_multi(num1,num2) {
    if(typeof num1 == undefined && typeof num2 == undefined) {
        
    } else if (typeof num1 == object && typeof num2 == object) {
        
    } else {
        console.log(num1 * num2);
    }
}

function calc_add(num1,num2) {

if(typeof num1 == undefined && typeof num2 == undefined) {

} else if (typeof num1 == object && typeof num2 == object) {

} else {

console.log(num1 + num2);

}

function calc_multi(num1,num2) {

if(typeof num1 == undefined && typeof num2 == undefined) {

} else if (typeof num1 == object && typeof num2 == object) {

} else {

console.log(num1 * num2);

}

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

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

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

function calc_add(num1,num2) {
    if(typeof num1 == number && typeof num2 == number) {
        console.log(num1 + num2);
    } else {
        
    }
}

function calc_multi(num1,num2) {
    if(typeof num1 == number && typeof num2 == number) {
        console.log(num1 * num2);
    } else {
        
    }
}

function calc_add(num1,num2) {

if(typeof num1 == number && typeof num2 == number) {

console.log(num1 + num2);

} else {

}

function calc_multi(num1,num2) {

if(typeof num1 == number && typeof num2 == number) {

console.log(num1 * num2);

} else {

}

まとめ

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

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

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

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

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。