More than 5 years have passed since last update.

JavaScriptでの変数のスコープと巻き上げ

Last updated at 2016-03-29Posted at 2016-03-27

var x = 1;
function f() {
  console.log('x = ' + x);
  var x = 2;
  console.log('x = ' + x);
}

というコードで、関数fを実行すると

x = undefined
x = 2

という結果が返されます。

一見、

x = 1
x = 2

のようになると感じるかもしれませんが、これはJavsScriptの変数のスコープが原因で、ローカル変数xのスコープは関数f内のためx = 1となりません。

では、なぜundefinedなのか？というと、先ほどのコードは以下のコードと等しいと考えると納得出来るかと思います。

var x = 1;
function f() {
  var x;
  console.log('x = ' + x);
  x = 2;
  console.log('x = ' + x);
}

これが俗に言う「変数の巻き上げ」です。この理由から、JavaScriptにおいて変数は関数の先頭でまとめて宣言するとよい、と言われたりします。

しかし、今後（ES6）はvarではなくletが使えるようになるため、これまでのベストプラクティスが通じなくなるかもしれません。

参考
パーフェクトJavaScript ｜Part2　JavaScript言語仕様 - 6章　関数とクロージャ - 6-4　スコープ