巻き上げ(Hoisting)は、宣言を先頭に移動する JavaScript のデフォルト動作です。
JavaScript では、変数は使用した後で宣言することができます。
言い換えれば、変数を宣言する前に使用することが可能です。
例 1 と 例 2 の結果は同じになります:
x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x;
// Display x in the element
var x; // Declare x
Try it Yourself »
var x; // Declare x
x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x;
// Display x in the element
Try it Yourself »
これを理解するには、「巻き上げ」という用語を理解する必要があります。
巻き上げは、すべての宣言を現在のスコープの先頭(現在のスクリプトまたは現在の関数の先頭)に移動する JavaScript のデフォルトの動作です。
JavaScript の宣言は、初期化ではなく宣言を呼び出すだけです。
例 1 と 例 2 の結果は同じ結果になりません:
var x = 5; // Initialize x
var y = 7; // Initialize y
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y
Try it Yourself »
var x = 5; // Initialize x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y
var y = 7; // Initialize y
Try it Yourself »
最後の例で、y が未定義であることは意味がありますか?
これは、初期化(=7)ではなく、宣言(var y)のみが巻き上げられるためです。
巻き上げのために、y は使用する前に宣言されていますが、初期化が行われないため、y の値は未定義です。
例 2 は、次の書き方と同じです:
var x = 5; // Initialize x
var y; // Declare y
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y
y = 7; // Assign 7 to y
Try it Yourself »
巻き上げは、(多くの開発者にとって)JavaScript の未知の、または見落している動作です。
開発者が巻き上げを理解していない場合、プログラムにバグ(エラー)が含まれている可能性があります。
バグを避けるためには、すべての変数を常にすべてのスコープの先頭で宣言するようにしてください。
これは、JavaScript がコードを解釈する方法として良いルールです。
strict モードの JavaScript では、宣言していない変数は使用できません。
次の章で、「strict の使用」を学習します。