キノコが何か作るブログ

ゲーム・ドット絵・アプリなどを作ります

MENU

【JavaScript】ホイスティングとは何なのか

ホイスティング

よくあるプログラミング言語だと、変数を使う前に変数を宣言しておかなければなりません。
しかし、JavaScriptでは「宣言はスコープの先頭で行われる」というルールがあります。そのため、スコープ内であればどこで宣言しても「is not undefine」というエラーが出ることはありません。
これがホイスティング(宣言の巻き上げ)です。

これはエラーが出る

function func()
{
  console.log(hoge);
}

func();

f:id:mizukinoko:20200714105923p:plain

こっちはエラーが出ない

function func()
{
  console.log(hoge);
  
  var hoge;
}

func();


ただ、こっからがややこしいのですが、ホイスティングで巻き上げられるのは変数の宣言だけで代入や初期化は書いてある順番通りに行われます。

function func()
{
  console.log(hoge);
  
  var hoge = "hello world";
  
  console.log(hoge);
}

func();

f:id:mizukinoko:20200714110416p:plain

この機能何に使えるんですかね?不慮のバグを発生させてしまいそうな気がするんですが。
ちなみにホイスティングで巻き上げられるのは変数の宣言だけでなく、配列やオブジェクトの宣言も巻き上げることができます。

function func()
{
  console.log(hoge);
  console.log(obj);
  
  var hoge = ["hellow", "world"];
  var obj = {
    x: 1,
    y: 11,
  };
  
  console.log(hoge);
  console.log(obj);
}

func();

f:id:mizukinoko:20200714111212p:plain

今のところ使いどころが分かりませんが、こういう挙動もあるんだなということで覚えておこうと思います。
以上。

プライバシーポリシー