やっとわかったjsの「巻き上げ」

🍹🍹はてなブログはこちら🍹🍹
http://www.sudara-bluse.tokyo/entry/js_makiage

JavaScriptには「変数の巻き上げ」という変な概念があります。
いまいちピンときてなかったのですがわかりました。

まず、

hoge

var pokemon = 'ピカチュー';
function show(){
    console.log(pokemon);
} 
show();   // "ピカチュー"

これは普通にコンソールに
"ピカチュー" と出るのはわかるとおもいます。

ではこれは？

hoge

var pokemon = 'ピカチュー';
function sing(){
   console.log(pokemon);
   var pokemon = 'カイリュー';
   console.log(pokemon);
}
sing();

"ピカチュー"、"カイリュー"
と思った人は巻き上げにやられてます。不正解です。

正解は、

hoge

// undefined
// "カイリュー"

とでます！
気持ち悪い。これが巻き上げだそうです。。

挙動を解説

hoge

/*
    JavaScriptでは、関数内のどこにでもvar文を使用して変数を宣言することができる。
    そして、これらの変数は関数内のいかなる場所で宣言されたとしても、
    その関数の先頭で宣言されたのと同じように動作します。

    こういう挙動↓
*/

var pokemon = 'ピカチュー';
function sing() {
    var pokemon;
    console.log(pokemon);  // undefined 
    pokemon = "カイリュー";
    console.log(pokemon);  // "カイリュー"
}
sing();

無意識にやってるかもしれませんが
「関数で使用されるローカル変数は、関数の先頭で宣言する！」
で予防します。

あんまり遭遇したことないのですが、知ってるの大事だとおもいます。

参考 (ありがとございます)
http://analogic.jp/hoisting/

終わり