JavaScript 変数の巻き上げと対策

変数の巻き上げ(ホイスティング:hoisting)

JavaScriptでは、関数の最後に変数を宣言したとしても、関数の先頭で変数を宣言したことと解釈される。
これを変数の巻き上げ(ホイスティング:hoisting)という。

例で見てみる

var name = 'グローバル';

function func() {
  console.log(name);     //...(1)
  var name = 'ローカル';
  console.log(name);     //...(2)
}

func();

結果はこうなる

//(1) undefined

//(2) ローカル

なぜこうなるのか？

JavaScriptでは、関数の最後に変数を宣言したとしても、関数の先頭で変数を宣言したことと解釈されるから。
つまり上の記述はこれと一緒。

var name = 'グローバル';

function func() {
  var name;

  console.log(name);     //...(1)undefined
  name = 'ローカル';
  console.log(name);     //...(2)ローカル
}

func();

対策

変数巻き上げはJavaScript特有の挙動で、意図しない動作を行う原因になることもある。
対策としてはシンプルで、変数の宣言はスコープの先頭で行い変数巻き上げが発生しないようにする。