巻き上げ（ホイスティング）

JavaScriptでは、関数と変数は巻き上げ（ホイスティング）られます。巻き上げは、スコープ（グローバルスコープまたは現在の関数スコープ）の先頭に宣言を移動するJavaScriptの振る舞いです。

これは宣言の前に関数や変数を使えることを意味します。言い換えると、関数や変数は使われた後にも宣言することができます。

詳細情報

技術的な例

変数:

foo = 2
var foo;

// 暗黙的にこのように解釈される

var foo;
foo = 2;

関数:

hoisted(); // "foo" と出力

function hoisted() {
  console.log("foo");
}

変数宣言における例

以下の場合はグローバル変数が参照される。

var x = 0; 
function foo(){ 
  console.log(x); // 0 と出力 
} 
hoge();

変数宣言巻き上げの場合。グローバル変数xは参照されません。

var x = 0;　
function foo(){
  console.log(x); // undefined と出力
  var x = 1; // var x宣言が巻き上げられる
}
foo();

上記のコードは、内部で以下のコードの様に実行されています。

関数スコープ内で、変数宣言はスコープ内先頭部に巻き上げられます。

var x = 0; //参照されない
function foo(){
  var x;　// foo関数スコープ内のxが参照され、値はundefinedとなります
  console.log(x); // undefined と出力
  x = 1;
}
foo();

技術リファレンス

• var statement - MDN
• function statement - MDN