92
71

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-09-26

🍹🍹はてなブログはこちら🍹🍹
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/

終わり

92
71
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
92
71

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?