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

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で問題なし

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