Variável fora da função

Olá, pessoal, estava fazendo uns exercícios para a faculdade e resolvi treinar em JS usando addEventListener e arrow function para um exercício que diz se é melhor usar gasolina ou álcool, conforme o custo benefício pelo preço:

button.addEventListener('click', () => {

  const button = document.getElementById('button');

  let custoDeAlcool = parseFloat(document.getElementById('custoDeAlcool').value);
  let custoDeGasolina = parseFloat(document.getElementById('custoDeGasolina').value);
  let mostrarResultado = document.getElementById('resultado');


  let resultado = (custoDeAlcool / custoDeGasolina).toFixed(2);

  if (isNaN(resultado) || custoDeAlcool < 0 || custoDeGasolina < 0)  {
    mostrarResultado.innerHTML = "Digite números válidos!";
  } else if (resultado > 0.7) {
    mostrarResultado.innerHTML = "Gasolina!";
  } else if (resultado < 0.7) {
    mostrarResultado.innerHTML = "Álcool!";
  } else {
    mostrarResultado.innerHTML = "Use qualquer um :)";
  }

  console.log(`O resultado é: ${resultado}`);  
});

O código funcionou, sem erro algum, mas depois fiquei encucado com uma coisa: declarei a const button apenas dentro da função, então como o js consegue identificar a variável fora dela, para executar o button.addEventListener, ainda mais por não ser um var, que tem presença global no código? Como não deu erro, eu só percebi esse detalhe depois, então queria entender como o JS dá essa "brecha" para que o código funcione, pois para mim, não faz muito sentido.

Testei, também, declarando fora da função e funcionou, também e foi como deixei, que para mim é o que faz mais sentido.

Valeu!