2021年11月09日 更新

変数の巻き上げ

どうも、クラゲジュニアです。
今回は、JavaScriptの変数の巻き上げについてです。

本題

Jsでは、以下のようなコードの時に

var scope = 'Global variable';

function func() {
  console.log(scope); 
  return scope;
}

console.log(func());

以下のように出力します。

Global variable
Global variable

これは、Globalスコープのscopeを出力しているだけなのでわかりやすいと思います。

しかし、以下のコードだとどうでしょう。

var scope = 'Global variable';

function func() {
  console.log(scope); // ①
  var scope = 'Local variable';
  return scope;
}

console.log(scope);
console.log(func());

以下のように出力すると考えるかもしれません。

Global variable
Global variable
Local variable

しかし、実行してみると以下のようになります。

Global variable
undefined
Local variable

この挙動を変数の巻き上げ、またはHoistingと呼びます。
JavaScriptではローカル変数は関数全体で有効なため①の時点では、ローカル変数のスコープが有効になっています。

しかし、①の時点ではローカル変数が確保されているだけでvar命令は実行されていない、つまり未定義となります。

以上です。