【JavaScript】Hoistingとは

Hotistingとは

JavaScriptにおける"hoisting"（ホイスティング）は、変数の宣言や関数の定義が、そのスコープ内の先頭に移動される挙動を指します。つまり、コードが実行される前に変数や関数がメモリに割り当てられ、それらが使用可能になるということです。

具体的には、JavaScriptエンジンがコードを実行する前に、変数の宣言部分がそのスコープの先頭に移動され、初期化はそのままの位置に残ります。関数の場合も同様で、関数の宣言部分がスコープの先頭に移動されます。

たとえば、次のコードを考えてみましょう。

console.log(x); // undefined
var x = 5;
console.log(x); // 5

foo(); // "hello"
function foo() {
  console.log("hello");
}

このコードでは、変数xと関数fooが使用される前に宣言されていますが、実際には宣言された位置と異なる箇所で使用されています。JavaScriptのhoistingにより、実際には以下のように解釈されます。

var x; // 変数の宣言部分が先頭に移動
function foo() { // 関数の定義が先頭に移動
  console.log("hello");
}

console.log(x); // undefined
x = 5;
console.log(x); // 5

foo(); // "hello"

まとめ

このように、変数や関数の宣言がそのスコープの先頭に移動することで、意図しないエラーを回避することができますが、コードの可読性や予測性が低下する可能性があるため、hoistingの影響を十分に理解しておくことが重要です。