変数の巻き上げ

変数の巻き上げとは

JavaScriptには変数の巻き上げという概念が存在します。
次のコードを見てみましょう。

var str = 'global';

var foo = function() {
	alert(str);

	var str = 'local';

	alert(str);
};

foo();

グローバル変数strに文字列「global」を格納、関数fooが定義されています。
通常関数fooを実行されると、アラートで変数strを代入で「global」と表示され、次に関数foo内の変数strに文字列「local」を格納、次にアラートで数strを代入で「local」と表示されるように想像できます。
しかし実際には最初のアラートでは「undefined」、次のアラートでは「local」と表示されます。

どうしてこのようなことが起きるのかというと、関数内で宣言された変数はどの位置で宣言しても、その関数の先頭で宣言されたものとみなされます。
このようなことを変数の巻き上げといいます。

変数の巻き上げは予期せぬ動作を引き起こすため、変数の宣言はなるべく関数の先頭に行うようにするか、できるだけ同じ変数名を避けるなど心がけると予期せぬ動作は起きにくいでしょう。