お世話になっております。
showPassword() をスコープの終盤で呼び出す理由が理解できません。

showPassword() は「画面リロード時にデフォルトでパスワードを表示させる」
という目的を実現する為に記載するものだと認識しています。

コードにおける処理は上から順に行われる原則から考えると、
showPassword() はスコープの上部に記載されるべきだと考えました。

そこで、以下のように記載をしたところ、
画面リロード時にパスワードが表示されなくなってしまいました。

'use strict';
{
  function showPassword() {
    const lowerCaseLetters = "abcdefghijklmnopqrstuvwxyz";
    const numbers = "0123456789";
    const symbols = "!?><*+`}";
    let password = "";
    let lettersList = lowerCaseLetters + lowerCaseLetters.toUpperCase();

    if (numbersCheckbox.checked) {
      lettersList+= numbers;
    }

    if(symbolsCheckbox.checked) {
      lettersList+= symbols;
    }

    for (let i = 0; i < slider.value; i++) {
      password += lettersList[Math.floor(Math.random() * lettersList.length)];
    };

    result.textContent = password;
  }

  showPassword(); // ここだと表示されない

  const result = document.getElementById("result");
  const generatePassword = document.getElementById("generatePassword");
  const slider = document.getElementById("slider");
  const passwordLength = document.getElementById("password-length");
  const numbersCheckbox = document.getElementById("numbers-checkbox");
  const symbolsCheckbox = document.getElementById("symbols-checkbox");

  slider.addEventListener('input', () => {
    passwordLength.textContent = slider.value;
  });

  generatePassword.addEventListener("click", () => {
    showPassword();
  });

  showPassword(); // ここだと表示される
}

これはなぜなのでしょうか。