Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

JavaScriptホイスティング

ホイスティング(巻き上げ)は、宣言を先頭に移動する 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

例 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

これを理解するには、「ホイスティング」という用語を理解する必要があります。

ホイスティングは、すべての宣言を現在のスコープの先頭(現在のスクリプトまたは現在の関数の先頭) に移動するJavaScriptのデフォルトの動作です。

letおよびconstキーワード

letとconstで定義された変数はブロックの先頭にホイストされますが、初期化されません。

意味: コードブロックは変数を認識していますが、宣言されるまで使用できません。

let変数を宣言する前に使用すると、ReferenceErrorが発生します。

変数は、ブロックの開始から宣言されるまで「一時的なデッド ゾーン」にあります。

例

ReferenceError
carName = "Volvo"; let carName;

const変数を宣言する前に使用すると構文エラーとなるため、コードは実行されません。

例

このコードは実行されません。

carName = "Volvo"; const carName;

letとconstの詳細は、JS Let / Constを参照して下さい。

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

例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

最後の例で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

変数を先頭で宣言してください。

ホイスティングは(多くの開発者にとって)JavaScriptの未知の動作、または見落とされている動作です。

開発者がホイスティングを理解していないと、プログラムにバグ(エラー)が含まれる可能性があります。

バグを避けるために、常にすべての変数をすべてのスコープの先頭で宣言してください。

これはJavaScriptがコードを解釈する方法であるため、これは常に適切なルールです。


厳密モードのJavaScriptでは、宣言されていない変数の使用は許可されません。次の章で「use strict」について学習してください。




プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル