Escopo de variáveis

Olá Paulo, tudo bem com você?

Neste exemplo não foi bem esse o caso de escopo de variável, foi uma questão mais de quando iremos executar essas funções, mas vou te explicar melhor

Primeiramente esse código:

const input = document.querySelector('[data-form-input]');

Poderia estar no começo do nosso arquivo, assim como o botão, pois só precisamos encontrar esse elemento 1 vez na arvore de elementos :)

A grande questão problemática é esse código:

const valor = input.value

Se ele estiver fora do eventListener o que irá acontecer é que quando entramos no site os nossos scripts são executados, e neste momento, não há nada dentro do input, então para ter o valor correto, precisamos apenas quando há o click ir ver o que tem dentro do formulário (input.value), antes disso teriamos apenas valores que não são úteis para nós!

A grande questão de escopo é observar de dentro para fora, escopos mais internos, como de funções, têm acesso a valores que estão acima dela, por exemplo:

// Escopo 1
const numero = 50;

function somar(primeiroValor, segundoValor){
        // Escopo 2
    return primeiroValor + segundoValor + numero;
}

console.log(somar(10, 20))

A função somar tem acesso a variável número pois ela está em um escopo acima, portanto é visível e totalmente utilizável dentro da função

Mas o contrário não é valido, o Escopo 1 só tem alcance as coisas que estão no mesmo nível dele ou acima, nunca abaixo!

Então ele pode acessar a função, mas não tem acesso as variáveis que estão dentro da função

Por isso que o input não precisaria estar dentro da função, pois como está em um escopo acima é totalmente acessível, a questão realmente é o momento que queremos ver o que está dentro dele :)

Conseguiu Compreender?

Qualquer Coisa estou a disposição!!!

Abraços e Bons Estudos =D