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

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

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

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

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

<input type="button" value="ボタン" onClick="clickBtn1()">

<script>
var a = "123"; //グローバル変数

function clickBtn1(){

	console.log(a); // undefined

	var a = "789"; //ローカル変数
}
</script>

4行目にグローバル変数のaがあります。
8行目は、console.logで変数aを参照しています。
10行目にローカル変数のaがあります。

このとき、8行目で表示される値は、グローバル変数またはローカル変数が表示されそうですがundefinedが表示されます。

上記のコードは、処理実行時に以下の7行目のように変数の宣言がされていることになっているためです。

<input type="button" value="ボタン" onClick="clickBtn1()">

<script>
var a = "123"; //グローバル変数

function clickBtn1(){
	var a;
	console.log(a); // undefined

	a = "789"; //ローカル変数
}
</script>

変数の宣言は、コードの処理実行前に行われるので、7行目のようにコードの先頭で宣言したことになります。
変数の宣言が先頭に移動したように見えるので巻き上げ（ホイスティング)といわれます。

グローバル変数を参照しようとして値がundefinedのときはこのケースかもしれません。

対策としては、ローカル変数は先頭で宣言するまたはlet/constを使用するようにします。

以下は、MDNのvarの巻き上げ（hoisting）のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var#var_hoisting