昔メモしていた内容を公開します。

var がわかりにくいポイント


var x = "First";

function (){
   console.log(x);
   var x = "Second";
   console.log(x);
}

のようになっていた時。

1つめのログでは、なんとなく“First”が出力されそうな気がする。
けど実際そうはならなずundefinedが表示される。

undefinedは変数定義（使いますよーっていう）はしてるけど、
初期化（あ、とりあえずこの値入れといてー）はしてないよ。
って言われていることと同義。


var x = "First";

で初期化してるやん！！って思うけど、

残念ながら


var x = "Second";

が宣言されているのでこっちがきいている。

じゃなんでSecondじゃないんだ！！って思う。

関数の巻き揚げは宣言だけで、初期化（値を代入してるやつ）は見てくれない。
ので、JSとしては、

// `function`に入ってから
// JS < 「お、なんか新しい変数x宣言してるじゃん？」
console.log(x); 
// JS < 「まだ初期化してないのにログ出してるワロタ」
// -> undefined
var x = "Second";
// JS < 「お。ここでxに“Second”を入れるのね。」
// -> void
console.log(x); 
// JS < 「xの中身は…“Second”出してあげよう。」
// -> "Second"

と思っている。

じゃあどうしろと…

結論からいうとvarはわかりにくいから使って欲しくない。
スコープが限定されている
let(変数)かconst（定数）を使いましょう。

ただ、実際のプロダクトコードを書く時はほぼほぼconstしか使わないです。
もし自分の書いているコードにvarがある人は書き直しましょう。
letがある人は、constにできないか見直してみましょう。

なるべく制約があった方が、意図しない変更やバグの混入を防げます。