JavaScriptのletのスコープについて

Question

letを使用して宣言した変数はそのブロックの中でのみ有効で再宣言不可 ＝ ブロックが違えば違う変数として同名で宣言できる。という認識なのですが、この解釈の仕方は合っているのでしょうか？
以下のようにfor文の外と条件式部分でletを用いて同名の変数を宣言した場合、問題なく宣言できるというところまでは理解できます。
しかしなぜfor分の条件式部分と同名の変数をfor文の処理の中で宣言してもエラーが出ないのかがわかりません。
for文の（）部分と{}部分は同じブロックではないのでしょうか？だとすればなぜfor文の外で宣言した変数（let i = 200）と(　)部分のlet i = 1は衝突しないのでしょうか？

let i = 200;

for (let i = 1; i < 10; i++){
    let i = 10;
    console.log(i);
}

//実行結果 10,10,10,10,10,10,10,10,10

調べてもよくわからなかったので、できるだけ噛み砕いて解説していただけると幸いです。
よろしくお願い致します。

Answer 1

for文の（）部分と{}部分は同じブロックではないのでしょうか？

違います。forの丸括弧内で宣言した変数は、独自のスコープを持ちます。

Comments

[maisumakun]

for()の丸括弧内でletやconst（for-inやfor-ofの場合には有用です）を使って変数を宣言すると、「ループ1回毎に変数が宣言される」という挙動になります（非同期実行してもループ実行時の値が保持されます）。

そして、for (let i = 1; i < 10; i++)と書いた場「前のループの時の値を読み取って次のループの変数にコピーする」という複雑な挙動が行われ、それからi++が行われます。

[maisumakun]

forの波カッコ内で宣言した変数のスコープは波括弧の中に限られますので、丸括弧の中からi++とするようなことはできません。

[maisumakun]

なお、現実問題としては、外側のスコープで使用中の変数名を内側に使うと読みづらくなるので、あまりよい書き方ではありません。

[biribiri]

なるほど...そのような仕組みがあったんですね。理解できました。
ありがとうございます。