JavaScript 巻き上げ(Hoisting)

❮ 前章へ 次章へ ❯

巻き上げ(Hoisting)は、宣言を先頭に移動する JavaScript のデフォルト動作です。


JavaScript 宣言は巻き上げられる

JavaScript では、変数は使用した後で宣言することができます。

言い換えれば、変数を宣言する前に使用することが可能です。

例 1例 2 の結果は同じになります:

例 1

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 »

例 2

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 の初期化は巻き上げられません

JavaScript の宣言は、初期化ではなく宣言を呼び出すだけです。

例 1例 2 の結果は同じ結果になりません

例 1

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 »

例 2

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 の使用」を学習します。


❮ 前章へ 次章へ ❯