JavaScript Hoisting とは何か

2年 ago
優斗, 朝陽
1 minute

JavaScriptのホイスティングとは、JavaScriptエンジンがコードの実行前に、変数や関数の宣言をスコープ内の上部に実際の宣言位置に関わらず移動させていることです。つまり、コード内で変数や関数の宣言は、どこにいても呼び出すことができ、エラーを発生させません。

ホイストの主な用途は2つある

  1. 変数の宣言：変数の宣言はスコープの先頭に昇格するが、変数の代入は昇格されない。
  2. 関数宣言：関数宣言はスコープの先頭に格上げされ、関数の宣言よりも前に呼び出しできる。

このコードは、ホイスティング動作を表す例です。

console.log(x); // undefined
var x = 5;
console.log(y); // ReferenceError: y is not defined
let y = 10;
sayHello(); // "Hello"
function sayHello() {
console.log("Hello");
}

最初の例では、変数xの宣言は一番上に昇格されていますが、代入処理は昇格されていないため、宣言の前にxの表示を行うとundefinedになってしまいます。

2つ目の例では、変数yはletキーワードで宣言され、letはホイスティングされないので、宣言前にyを使用するとReferenceErrorが発生します。

3番目の例では、sayHello関数の宣言は一番上に引き上げているので、宣言の前で関数を呼び出すことができます。

bannerAds