コードが実行される順番について混乱しています

関数宣言の巻き上げや、コードが実行される順番について説明しています。
2020年5月3日
ユーザー

お世話になります。
質問させていただきます。

下記の部分についての質問です。

function updateTimer() {
  const timeLeft = startTime + timeLimit - Date.now();
  timerLabel.textContent = (timeLeft / 1000).toFixed(2);

  const timeoutId =setTimeout(() => {
  updateTimer();
  }, 10);

  if (timeLeft < 0) {
    isPlaying = false;

    clearTimeout(timeoutId);
    timerLabel.textContent = "0.00";
    setTimeout(() => {
      showResult();
    }, 100);

    target.textContent = "click to replay";
  }
}

function showResult() {
  const accuracy = score + miss === 0 ? 0 : score / (score + miss) * 100;
  alert(`${score} letters, ${miss} misses, ${accuracy.toFixed(2)}% accurcy!`);
}

上記の

setTimeout(() => {
      showResult();
    }, 100);

は、

function showResult() {…

を定義する前に記述されています。時系列で考えるとエラーになるのではと思いましたが、問題なく作動しています。その後にある実際に updateTimer()を呼び出すwindow.addEventListener("click", () => {…などともいろいろ順番を入れ替えてみましたが、どの順番でも問題なく作動しました。

今回、時系列が気になったのは、constやletなどの定義は時系列が正しくないとエラーになるという経験をしていたからです。しかし、前半部分のconstやletなどを最下段に持ってきても問題なく作動しました。

このことから個人的解釈としては、

{
const accuracy = score + miss === 0 ? 0 : score / (score + miss) * 100;
  alert(`${score} letters, ${miss} misses, ${accuracy.toFixed(2)}% accurcy!`);
}

のようなブロック内ではコードが時系列通りでないとエラーとなり、

function showResult() {…

window.addEventListener("click", () => {…

ブロック外で定義されたconstやlet

などについては時系列の概念は無いので順不同でも作動する。

と考えましたが、この解釈は合っておりますでしょうか?
理解の誤りや理解しやすい考え方などがありましたらご教授をお願いします。

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(4)