ジャンプ先:

巻き上げ(Hoisting) は、ECMAScript® 2015 言語仕様より前には、どんな規範的な仕様書にもなかったものです。巻き上げは JavaScript の実行コンテキスト (特に作成と実行のフェーズで) では一般的な方法と考えられていました。しかし、巻き上げの概念は誤解に繋がる可能性があります。

概念として、例えば、巻き上げでは変数と関数定義は物理的にコードの一番上に移動すると厳密に定義されています、これは実際に起こっていません。その代わりに、変数と関数宣言は compile フェーズでメモリーに配置されますが、コーディングでタイプされた場所は変わりません。

詳細情報

技術的な例

JavaScript で関数宣言がコード領域を実行する前にメモリーに配置される利点は、コードで関数を定義する前に使うことができることです。例えば:

function catName(name) {
  console.log("My cat's name is " + name);
}

catName("Tigger");
/*
上記のコードの結果は: "My cat's name is Tigger"
*/

上記のコード断片はコードが動作するように書いたよう期待する方法です。今度は、関数を書く前に関数を呼び出したらどうでしょう:

catName("Chloe");

function catName(name) {
  console.log("My cat's name is " + name);
}
/*
上記のコードの結果は: "My cat's name is Chloe"
*/

コード内で関数を書く前に、関数呼び出しを最初に書いても、コードは動作します。これは JavaScript でコンテキスト実行が動作するためです。

巻き上げはその他のデータ型や変数でも同様に動作します。変数は定義の前に初期化して使うことができます。しかし初期化しないと使うことができません。

定義のみが巻き上げられます

JavaScript では定義のみが巻き上げられ、初期化はそうでありません。変数が使用された後に定義や初期化された場合、値は undefined になります。例えば:

console.log(num); // Returns undefined 
var num;
num = 6;

使用された後に変数を定義し、ただその前に初期化した場合、値を返します:

num = 6;
console.log(num); // returns 6
var num;

下記の 2 つの例は同じふるまいを実例しています。

var x = 1; // Initialize x
console.log(x + " " + y); // '1 undefined'
var y = 2; // Initialize y

// The above example is implicitly understood as this: 
var x = 1; // Initialize x
var y; // Declare y
console.log(x + " " + y); // '1 undefined'
y = 2; // Initialize y

技術リファレンス

ドキュメントのタグと貢献者

このページの貢献者: Uemmra3, chikoski, keioka, hurumeki
最終更新者: Uemmra3,