JavaScriptのホイストとは？特徴や注意点について詳しく解説します

JavaScriptのホイストとは

ホイストはJavaScriptの概念であり、機能ではありません。他のスクリプト言語やサーバーサイド言語では、変数や関数は使う前に宣言しなければなりません。

JavaScriptでは、変数名や関数名は宣言する前に使用することができます。

JavaScriptのコンパイラは、変数や関数の宣言をすべて先頭に移動させ、エラーが発生しないようにします。これをホイスティングと言います。

a = 1;

console.log('a = ' + a); // a = 1

let a;

以下のように、変数を別の変数に代入することもできます。

a = 1;
b = a;

console.log('a = ' + a);
console.log('b = ' + b);

let a;
let b;

ホイストは宣言時のみ可能で、初期化はできません。JavaScriptは、一行で宣言・初期化された変数を移動させません。

console.log('a = ' + a); // a = undefined
        
let a = 1;

上の例でわかるように、let a = 1がホイストされていないので、aの値は未定義になります。

JavaScriptのコンパイラは、変数宣言と同じように、関数定義を先頭に移動させます。

console.log(Sum(5, 5)); // 10

function Sum(a, b) {
    return a + b;
}

JavaScriptのコンパイラは、関数式を移動しないのでご注意ください。

Add(5, 5); // error

let Add = function Sum(a, b) {
    return a + b;
}

JavaScriptのコンパイラは、関数の定義を変数宣言の前に移動させます。次の例はそれを証明するものです。

console.log(Test);

let Test;

function Test() {            
    console.log("Test function called");
}

上の例のように、Test関数定義が表示されます。

つまり、関数は変数の前に移動します。