Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

終わり

39_isao
鮭とメロンパンとコーヒー牛乳が好物です。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした