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
関連の記事