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

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 

関連の記事

JavaScript constとletとvarの違い
JavaScriptのデータ型とデータ型を調べる方法

△上に戻る