グローバルスコープで宣言した変数をローカルスコープで宣言すると処理が変化するのはなぜか？

Question

上のソースコードは、グローバルスコープでiを宣言すると、2秒後にclearTimeoutによって処理が終了します。
しかし、下のソースコードのように、ローカルスコープ内でiを宣言するように変更すると、処理は止まらず延々と続きます。
なぜそのように処理に変化があるのか考えてみたのですが（下記に書いてあります）、それがあっているかどうか教えてください。もっと適切な考え方がある場合は教えていただけると助かります。

2秒後に止まるソースコード

let i = 0; //iはここで宣言している

  const showTime = () => {
    console.log(new Date());
    let timerId = setTimeout(showTime, 1000);
    i++;
    if (i > 2) {
      clearTimeout(timerId);
    }
  };

  showTime();

無限に続くソースコード

const showTime = () => {
  console.log(new Date());
  let timerId = setTimeout(showTime, 1000);
  let i = 0; //iをここで宣言するように変更
  i++;
  if (i > 2) {
    clearTimeout(timerId)
  }
};

showTime();

考えたこと

グロ－バルスコープで宣言した変数iはプログラム全体で使えるため、定数showTime実行にも適用される。一方、ローカルスコープで宣言した変数iはshowTimeの関数内のみであり、実行時には適用されない。つまり、showTimeを実行するときにif文が無視される、ということでしょうか？

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

[hayamin1111]

失礼しました。アンサーを選ばせていただきました！

Answer 1

グロ－バルスコープで宣言した変数iはプログラム全体で使えるため、定数showTime実行にも適用される。一方、ローカルスコープで宣言した変数iはshowTimeの関数内のみであり、実行時には適用されない。

いえ、違います。ローカルスコープの変数は、スコープに入るたびに初期化されるのが、この事象でのポイントです。つまり、showTime関数1回の実行ごとにi = 0;が毎回実行されるので、i++があっても、永遠にi > 2の条件を満たすことはありません。

Comments

[maisumakun]

なお、C言語のstatic変数など、関数実行を超えて存続するローカル変数も言語によってはありますが、JavaScriptにはありません。

[hayamin1111]

なるほど！ローカルスコープ内ではiは毎回0に戻されるから、i > 2になることは一生ないってことですね！非常にわかりやすい回答をありがとうございます！

Answer 2

呼ばれるたんびに

let i = 0; //iをここで宣言するように変更

0に初期化してるんだから、そうなって当然というはなしですね

Comments

[hayamin1111]

なるほど！毎度初期化しているから増えることはないということですな！端的な回答をありがとうございます！