JavaScript | 変数のスコープ


スポンサーリンク

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

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

目次

  1. ブロックスコープ
  2. グローバル変数とローカル変数

ブロックスコープ

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();


シングルページWebアプリケーション ―Node.js、MongoDBを活用したJavaScript SPA

シングルページWebアプリケーション ―Node.js、MongoDBを活用したJavaScript SPA

  • 作者: Michael S. Mikowski,Josh C. Powell,佐藤直生,木下哲也
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2014/05/24
  • メディア: 大型本
  • この商品を含むブログを見る
JavaScriptの基礎の復習と、最近流行りのSPAの勉強ができます。

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

いわずとしれた定番本。
定石を学ぶことができます。