JavaScriptの変数の巻き上げのサンプルです。
目次
| サンプル | 変数の巻き上げのサンプル |
| 関数内に同じ変数名がない場合 | |
| 関数内で変数の前にletを使用した場合 |
変数の巻き上げのサンプル
<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を使用するようにします。
関数内に同じ変数名がない場合
関数内に同じ変数名がない場合です。
この場合は、グローバル変数を参照します。
<input type="button" value="ボタン" onClick="clickBtn1()" />
<script>
var a = "123"; //グローバル変数
function clickBtn1() {
console.log(a); // 123
var b = "789"; //ローカル変数
}
</script>
8行目は4行目のグローバル変数を参照して数値を表示します。
関数内で変数の前にletを使用した場合
<input type="button" value="ボタン" onClick="clickBtn1()" />
<script>
var a = "123"; //グローバル変数
function clickBtn1() {
console.log(a);//ReferenceError: Cannot access 'a' before initialization
let a = "789"; //ローカル変数
}
</script>
8行目は、10行目の変数aを参照しようとしますがエラーになります。
以下は、MDNのvarの巻き上げ（hoisting）のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var#var_hoisting
関連の記事