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

javascriptにおける変数の巻き上げをざっくりまとめ

More than 3 years have passed since last update.

javascriptにおける変数の巻き上げを調べたのでまとめ

まずグローバルの変数を参照する場合

var name = 'fukamiiiiinmin';

var call = function(){
  console.log(name)//グローバルのname(fukamiiiiinmin)を参照してる
}

call() 
// => fukamiiiiinmin

ローカル変数を参照する場合

var name = 'fukamiiiiinmin';

var call = function(){
  var name = 'masakazu';
  console.log(name) //localで宣言したmasakazuを出したい
}

call()
// => masakazu

関数内でグローバルのnameを呼び出して、ローカルに宣言したnameも呼び出したいわー

var name = 'fukamiiiiinmin';

var call = function(){
  console.log(name); // 上で宣言したname(fukamiiiiinmin)を出したいなーー

  var name = 'masakazu';
  console.log(name); //直前で宣言したname(masakazu)を出したいなー
}

call()
// => undefined あれ?fukamiiiiinminじゃない?
// => masakazu ここはmasakazuで問題なし

なんでやねん

これがいわゆる変数の巻き上げというやつで文法とデータ型 - JavaScript | MDNによると

もうひとつ、JavaScript の変数にまつわる独特な点として、例外を発生させることなく後に宣言した変数を参照できる点が挙げられます。この考え方は巻き上げとして知られています。JavaScript の変数は関数や文の先頭まで、ある意味「巻き上げられ」、持ち上げられます。一方、巻き上げられない変数は undefined 値を返します。そのため、その変数を使用したり参照した後に宣言や初期化を行っても、依然として undefined が返されます。

というわけです。
とりあえず長いので簡単に省略すると
関数内で宣言したローカル変数は全部関数内の一番最初に持って行くよ!
その時は変数名だけ宣言するからundefinedにするよ!

ってことです!
つまり先程のjsは途中で宣言したvar name = 'masakazu'のnameだけ巻き上げられて

var name = 'fukamiiiiinmin';

var call = function(){
  var name;// var name = undefined;と同じ
  console.log(name); // 変数が巻き上がってundefineで宣言されとる!

  name = 'masakazu';
  console.log(name); 
}

call()
// => undefined なるほど
// => masakazu ここはmasakazuで問題なし

というふうになるわけです。

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
ユーザーは見つかりませんでした