WEBサービス創造記

WEBサービスを作ったり保守したりしてる人のメモブログです。

JavaScriptで変数を宣言するときは必ずvarを付ける

      2015/07/22

スコープのおさらい

標題の件に入る前に軽くJavaScriptでの変数のスコープについておさらいしておきます。

JavaScriptの変数のスコープには関数スコープ・グローバルスコープ・ブロックスコープなどがあります。
Java などの他言語では、if や for などのブロック内でのみ変数が有効となるブロックスコープがありますが、JavaScript には存在しません。
※JavaScript1.7からはlet を使ったブロックスコープがサポートされました。

例えば、関数内で定義されている変数は関数内でのみ有効となる「ローカル変数」となります。

function func () {
  var hoge = "bar";
  alert(hoge);
}

func();  // "bar"が表示される

alert(hoge);  // ReferenceError: hoge is not defined となる

一方関数の外(トップレベル)で変数が定義された場合はスクリプト内のどこからでも使用できる変数、いわゆる「グローバル変数」となります。

var hoge = "foo";

function func () {
  alert(hoge);
}

func();  // "foo"が表示される

関数内でグローバルスコープで定義された変数と同じ名前のローカル変数がある場合は、ローカル変数の方が有効になります。

var hoge = "foo";

function func () {
  var hoge = "bar";
  alert(hoge);
}

func();  // "bar"が表示される

関数内で変数の初期化時にvarをつけないとグローバルスコープで有効に

本題に入ります。

よく言われていることですが、JavaScriptでは変数の宣言時にvarを付けたほうがいいです。
付けないとどうなるかというと、副題(関数内で変数の初期化時にvarをつけないとグローバルスコープで有効に)の通りです。

function func () {
  hoge = "foo";
  alert(hoge);
}

func();  // "foo"が表示される

alert(hoge);  // "foo"が表示される

上記コードでは関数内で初期化したhogeが関数の外でも使えてしまっています。

このようなスコープの競合を避けるため、varは必ず付けるようにしたほうがいいと思います。

参考資料

 - JavaScript , , , ,