JavaScriptの変数宣言がletがなぜ良いのかをざっくりまとめる

varはやめろ、という背景にあるものをしっかり説明できないのでざっくり書く

TL;DR

スコープの管理がletのほうがより区切られているのでそちらを使うべき

例えば以下のようなコードがあるとする

var a = 2
console.log("---start---")
for(i=1;i<2;i++){
  var a = i + 10
  console.log(a)
}

console.log("---result--")
console.log(a)

こうした場合にconsoleに表示されるのは以下のようになる

---start---
11
---result--
11

forスコープの中で変数の再宣言をしているから別枠で扱ってくれそうだが、varは関数全体に変数のスコープが及ぶため、for文の中のvar a が単なる変数の再宣言になっているだけになってしまっている。

letで行うと、ブロック内で同名の変数を宣言するとブロック外には作用しない

let a = 2
console.log("---start---")
for(i=1;i<2;i++){
  let a = i + 10
  console.log(a)
}
console.log("---result--")
console.log(a)

このようにすると以下のような結果になる

---start---
11
---result--
2

なお、以下のように内部の宣言をvarにすると…

let a = 2
console.log("---start---")
for(i=1;i<2;i++){
  var a = i + 10
  console.log(a)
}
console.log("---result--")
console.log(a)

エラーになる。

Identifier 'a' has already been declared

これはletとしてaが宣言されているのに、ブロックスコープ内で再びvarで宣言すると競合するからだと思われる。