感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

JavaScriptで変数の存在をチェックする。それがundefinedかどうか。グローバルに宣言されているか。

<スポンサーリンク>

グローバル変数とローカル変数

グローバル変数とは、トップレベルコードで宣言する変数のこと。
トップレベルコードとは、関数の外に書いたコードのこと。
一方、ローカル変数とは、関数内で宣言する変数のこと。
グローバル変数とローカル変数は両者とも、実体はプロパティである。

ReferenceError例外

宣言されていない変数から値を取り出そうとすると、ReferenceError例外が発生する。
いくつかのチェックを施すことによって、ReferenceError例外を避けることができる。

<?xml version="1.0" encofing="utf-8" ?>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script>
//グローバル変数aを宣言
a = "hoge";
window.onload = function() {
	if ('a' in this) {
		console.log('aはグローバルに宣言されています');
		var b = a;
	} else {
		console.log('aは宣言されていません');
		var b = 'fuga';	
	}
	console.log(b);
}

</script>
</head>
<body>
</body>
</html>

コンソールには以下のように表示される。

aはグローバルに宣言されています sandbox.html:10
hoge 

aをコメントアウトすると、

aは宣言されていません sandbox.html:13
fuga 

と表示される。また、関数内で

var a = "hoge";

のように宣言した場合も同様に

aは宣言されていません sandbox.html:13
fuga 

と表示される。

変数がundefinedかどうか調べる

上記の例を利用しつつ、変数がundefinedかどうかを調べる構文について考える。

window.onload = function() {
	var a = "hoge";
	if (typeof a !== 'undefined') {
		console.log('aは既に宣言されています');
		var b = a;
	} else {
		console.log('aは宣言されていません');
		var b = 'fuga';	
	}
	console.log(b);
}

このようなコードを書けば、aがundefinedかどうかを調べてから変数を使うことができる。
上記の実行結果は、

aは既に宣言されています sandbox.html:11
hoge 

となる。
これを

	//var a = "hoge";
	if (typeof a !== 'undefined') {
		console.log('aは既に宣言されています');
		var b = a;
	} else {
		console.log('aは宣言されていません');
		var b = 'fuga';	
	}
	console.log(b);

とコメントアウトすると、

aは宣言されていません sandbox.html:14
fuga 

となる。

もっとシンプルに、値を持っているかどうかを調べたい時は以下のようにしてもよい。

var a = "hoge";
//変数aが値を持ってたら使う
var b = a || "fuga";
console.log(b); //hogeと表示

値を持っていない場合。

var a;
//変数aが値を持ってたら使う
var b = a || 'fuga';
console.log(b); //fugaと表示

勉強した本

パーフェクトJavaScript (PERFECT SERIES 4)

パーフェクトJavaScript (PERFECT SERIES 4)