今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

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

f:id:sudara_bluse:20171028181339p:plain

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

まず

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

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

ではこれは?

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

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

正解は、

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

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

挙動を解説

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

こういう挙動↓

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

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

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

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

終わり

qiita.com