JavaScript | 変数のスコープ

プログラミング言語におけるスコープとは、変数やパラメータの生存期間を決め、どこからそれらにアクセスできるかという範囲を決めるものです。

中括弧でくくられた一連の命令文のことを「ブロックスコープ」といいますが、ブロックの中で定義された変数は、ブロックの外側からはアクセスできません。
名著「JavaScriptグッドパーツ」などでは、JavaScriptでは関数内で利用する全ての変数を、関数の一番最初で定義することが推奨されています。

目次

ブロックスコープ

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

ブロックスコープ

JavaScriptにはブロックスコープが存在しません。
以下のように、ブロックで囲んだとしても、それはブロックスコープとしては扱われません。

var x = 1;

{var x = 100;
 console.log(x); //ここではグローバル変数xに100を代入している
}

console.log(x); //100が表示される

これはforループにも言えることで、for文のブロックでvar iとか宣言したところで、それはブロックに閉じられるわけではありません。

function loop() {
	var i = 100;
	for (var i = 0; i < 5; i++) {
		//
	}

	console.log(i); //iは5になる
}

loop();

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

グローバル変数はどこからでもアクセスできます。
ローカル変数は宣言された場所からしかアクセスできません。

JavaScriptで変数のスコープを決めるブロックは、関数だけです。
つまり、グローバル変数は関数の外側で定義し、ローカル変数は関数内で定義します。

例を見てみましょう。

var global = 'I am global elite!';

function hoge() {
	var inner = 'I am inner!';
}

hoge();

console.log(global); //'I am global elite!'と表示される。

console.log(inner); //ここはエラー

関数のスコープ内で宣言された変数にアクセスしようとすると、以下のようなReferenceErrorが出ます。

ReferenceError: inner is not defined

多くのJavaScript本では、関数の先頭で使用する全てのローカル変数を宣言してしまうことが推奨されています。
以下のように、関数の先頭で、インデントを揃えて宣言してしまうのがよいでしょう。

function loop() {
	var i    = 0,
	    hoge = 'Im hoge',
	    fuga = 'Im fuga';

	for (i = 0; i < 5; i++) {
		//
	}

	console.log(i); //iは5になる
	console.log(hoge);
}

loop();