JavaScript Hoisting

JavaScriptの文法でハマりやすいものは色々あります。
先日購入した『JavaScript Pattern』に、昔よくハマってしまっていたhoistingについて書かれていたので、メモ。

hoistingはこんな感じです。

var hoge = "outer";

var func = function() {
    // グローバルなhoge(outer)の表示を想定
    alert(hoge);

    var hoge = "inner";
    // 関数内のhoge(inner)の表示を想定
    alert(hoge);
}
func();

コメントに想定している結果が書いてありますが、
実際の結果は、「undefined」と「inner」が表示されます。
一番目のalert(hoge);でhogeという変数定義を一番近いスコープ（func関数）に探しにいき、そこで見つからなかった場合はグローバルに探しにいきます。
ですが、今回は関数内でhogeを定義しているため、関数内のhogeを参照します。
ただし、一番目のalert(hoge);が実行される時点では、hogeはまだ初期化されていないため
undefinedが表示されてしまいます。

こういうのを防ぐためにも、変数は極力最寄りの関数の先頭で初期化しておきたいですね。