JavaScriptのおさえておきたい言語仕様 – 変数の巻き上げ

JavaScriptのおさえておきたい言語仕様 – 変数の巻き上げ

JavaScriptには「巻き上げ」という仕様があることをご存知でしょうか。他の言語にはあまり見られない仕様とのことなので、既にJavaScript以外の言語を習得されている方には、混乱を生む要因ともなる仕様です。今回はこの巻き上げについて自身の理解の確認も兼ねてご紹介します。

まずは下記のコードをご覧下さい。

var test = 'foo';

var hoisting = function() {
  console.log(test);
  var test = 'bar';
  console.log(test);
}
hoisting();

さて、結果はどうなると思いますか?最初にfooが表示され、次にbarと表示されることを期待すると思いますが、実際には下記のような結果になります。

// undefined
// bar

グローバル環境に宣言したfooが表示されず、なぜundefinedとなってしまうのでしょうか。これが今回ご紹介する「変数の巻き上げ」というJavaScriptの仕様によるものです。変数の巻き上げとは、「変数の宣言はスコープ内のどこで行われても常にスコープの先頭で行われたこととする」ことを指します。つまり、上記のコードは下記のコードと同じ意味となります。

var test = 'foo';

var hoisting = function() {
  var test;
  console.log(test);
  test = 'bar';
  console.log(test);
}
hoisting();

こうすれば先ほどの結果にも納得がいくのではないでしょうか。巻き上げによって変数var test;がスコープの先頭で宣言されている状態で、その後に値が代入されるイメージです。やっかいな仕様ですね。

結論

このような意図しない結果となるのを防ぐために、変数は必ずスコープ内の先頭で宣言する癖をつけましょう。

私たちGlatchはコーポレートサイト制作を得意とするWeb制作事務所です。
お気軽にご相談・お問い合わせください。