JavaScript 変数の巻き上げのサンプル

JavaScriptの変数の巻き上げのサンプルです。

目次

変数の巻き上げ

  • 関数で変数「a」を参照した後にローカル変数「a」の宣言がある場合「a」はundefinedになりますが、グローバル変数「a」があってもundefinedになる現象のことです。
  • ホイスティング(hoisting)ともいわれます。
  • 対策としては、ローカル変数は関数の先頭で宣言するようにします。
  • 以下は、MDNのvariable文のリンクです。varの巻き上げ(hoisting)と言う箇所が該当します。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var

変数の巻き上げのサンプル

変数の巻き上げのサンプルです。
2行目にグローバル変数のaがあります。
6行目で、変数aを参照します。2行目のグローバル変数aの123が表示されそうですが、undefinedと表示されます。
→8行目のローカル変数aを参照しようとするためです。

<script>
var a = "123";

function click1(){

	document.write(a); // undefined

	var a = "789";

}
</script>
<body>
<input type="button" value="ボタン" onClick="click1()">
</body>

ローカル変数を関数の先頭に記述

上記コードから6行目と8行目を入れ替えました。
8行目のaは、789と表示されます。

<script>
var a = "123";

function click1(){

	var a = "789";

	document.write(a); // 789

}
</script>
<body>
<input type="button" value="ボタン" onClick="click1()">
</body>

(参考)グローバル変数を参照するパターン

このサンプルは、8行目のローカル変数aをコメントしました。
6行目では、2行目のグローバル変数aの123が表示されます。

<script>
var a = "123";

function click1(){

	document.write(a); // 123

	//var a = "789";

}
</script>
<body>
<input type="button" value="ボタン" onClick="click1()">
</body>

(参考)グローバル変数がないパターン

このサンプルは、2行目のグローバル変数aをコメントしました。
6行目は、undefinedが表示されます。

<script>
//var a = "123";

function click1(){

	document.write(a); // undefined

	var a = "789";

}
</script>
<body>
<input type="button" value="ボタン" onClick="click1()">
</body>

対策

関数のローカル変数は、関数の先頭で宣言するようにします。

関連の記事

JavaScript 無名関数と即時関数のサンプル
JavaScript クロージャのサンプル
JavaScript 高階関数のサンプル
JavaScript エスケープシーケンスのサンプル
JavaScript 例外処理のサンプル(try...catchとthrow)




△上に戻る