昔メモしていた内容を公開します。
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にできないか見直してみましょう。
なるべく制約があった方が、意図しない変更やバグの混入を防げます。