let loc = 0 を setWord() 関数内に入れるとうまく動作しないのはなぜですか?

関数内で同名の変数を宣言してしまうと、関数外で宣言した変数が隠されてしまうためです。
2022年3月20日
ユーザー

いつもお世話になっております。
自分は本レッスンにて、

let loc = 0

の宣言も setWord() の処理の中に入れていいのではないかと考え、

  function setWord() {
    word = words[Math.floor(Math.random() * words.length)];
    target.textContent = word;
    let loc = 0;
  }
  const words = [
    'red',
    'blue',
    'pink',
    ];
  let word;
  // let loc = 0;
  const target = document.getElementById('target');

  setWord();

  document.addEventListener('keydown', e => {...};

と書いてみたのですが、これでは動作しませんでした。
試しに上のコメントアウトを外し、レッスンと同じ位置と setWord() 内の二箇所で let loc = 0 宣言したところ、一度だけ正常に動作し、文字をセットした後、動作しなくなりました。

関数内で宣言した loc は関数の外では使えないため、ページ読み込み時に宣言された loc にて一度だけ正常に動作を完了させ、setWord() にて文字をセットしてもグローバル範囲?では locword.length のままリセットされないので動作しない。
という状況だと推測しました。

しかしそうであるならば、正常に動作するコードにて、
setWord() 内で再代入 loc = 0 した時がグローバル範囲でも loc = 0 と再代入したことになっていることはおかしい気がしています。

この場合、関数内での宣言は別のものとして扱われるが、関数内での再代入はグローバル範囲でも再代入として認められる。
といった理解でいいのでしょうか?

ご指摘よろしくお願いします。

この回答を見るにはプレミアムサービスへの登録が必要です

プレミアムサービスとは?