JavaScript ホイスタ

昇格（ホイストング）は、JavaScript が宣言をトップに移動させるデフォルトの動作です。

JavaScript の宣言は昇格されます

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

言い換えれば、宣言する前にそれを使用することができます。

例 1 および例 2 の結果は同じです：

例 1

x = 5; // x に 5 を割り当てる
elem = document.getElementById("demo"); // 要素を検索
elem.innerHTML = x;                     // 要素に x を表示
var x; // x を宣言

自分で試してみてください

例 2

var x; // x を宣言
x = 5; // x に 5 を割り当てる
elem = document.getElementById("demo"); // 要素を検索
elem.innerHTML = x;                     // 要素に x を表示

自分で試してみてください

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

ホイストングは、JavaScript がすべての宣言を現在のスコープのトップに昇格させるデフォルトの動作です（現在のスクリプトまたは現在の関数のトップに昇格させる）。

let と const キーワード

を使用して let または const 宣言された変数や定数は昇格されません！

以下のページで JS Let / Const 詳細については、let と const についての内容を読んでください。

JavaScript の初期化は昇格されません

JavaScript は初期化ではなく宣言を昇格させます。

例 1 および例 2 の結果が異なる：

例 1

var x = 5; // x を初期化
var y = 7; // y の初期化
elem = document.getElementById("demo"); // 要素を検索
elem.innerHTML = x + " " + y;           // x と y を表示

自分で試してみてください

例 2

var x = 5; // x を初期化
elem = document.getElementById("demo"); // 要素を検索
elem.innerHTML = x + " " + y;           // x と y を表示
var y = 7; // y の初期化

自分で試してみてください

最後の例の y が未定義であるというのは、説得力がありますか？

これは、宣言（var y）ではなく初期化（=7）がトップに昇格されているためです。

hoisting のため、y は使用される前に既に宣言されていますが、初期化が上昇していないため、y の値は未定義のままです。

例 2 も同様です：

インスタンス

var x = 5; // x を初期化
var y;     // y を宣言
elem = document.getElementById("demo"); // 要素を検索
elem.innerHTML = x + " " + y;           // x と y を表示
y = 7;    // 7 を y に代入

自分で試してみてください

変数を先頭に宣言してください！

Hoisting（多くの開発者にとって）は、JavaScript の未知または無視されている動作です。

開発者が hoisting を理解していない場合、プログラムにはバグ（エラー）が含まれるかもしれません。

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

これは JavaScript がコードを解釈する方法だから、この良い習慣を続けてください。

厳格モードでは、JavaScript は宣言されていない変数を使用することを許可しません。

次の章で学んでください「use strict。