Um pouco de Teoria antes da diversão.

 

Muitas vezes, um simples princípio não compreendido, pode confundir novatos ou especialistas em JavaScript. Neste artigo, vamos tentar entender melhor um problema comum, que é mais simples do que parece.

Declarações na frente

Antigamente em linguagens como C, se usavam funções ou procedimentos para dividir um programa, mas havia um problema: as declarações deveriam ficar sempre na frente.

Suponha que você queira usar uma função que junta palavras:

Mas temos um problema aqui, não? Essa função não foi definida antes de ser chamada!
O programa retornará um erro, pois juntarPalavras() não foi criada, ou acha que a linguagem deve permitir que você use funções que são definidas no final do código?

Declarar funções no início do programa resolveu o problema por um tempo, pois todas as funções e variáveis eram declaradas antes de serem usadas, sendo assim não se tinha erros de referência.

Com o tempo os programadores pensaram: “Mas por que cargas d’água não fazemos isso mais amigável e fácil de ler?”, “por que ler o código de baixo para cima e, não de cima para baixo?”. Agora podemos colocar as definições em qualquer lugar do código e usá-los, mesmo antes de realmente serem definidos, que maravilha não?

O que acontece agora é que os compiladores ou até mesmo linguagens runtime leem todo o programa para saber que funções e variáveis você declarou no código. Após isso, a execução real acontece e ele já sabe onde está cada coisa. JavaScript faz exatamente isso, o que chamamos de Hoisting.

 

Hora da diversão

 

Vamos começar com algo leve, para ir aquecendo os neurônios, veja o seguinte código:

Até aqui nada de novo, apenas iniciamos a variável nome com o valor jonatan e mostramos na tela;

Certo, e que tal tentarmos isso:

Recebemos um erro bem obvio não acha? Como vamos definir o nome com o valor de meunome se essa variável nem existe ainda?

Agora, deste jeito:

Opa! “undefined”, sacam a jogada?

Isso acontece porque o JavaScript não obriga você a declarar variáveis, ​​permite que você defina as funções em qualquer lugar que você queira, o que lhe permite usar uma função antes de sua definição. O nome hoisting, elevação ou até mesmo içamento, é só um termo especificado, pois ele arranca as declarações até o topo do seu escopo.

Beleza, agora qual a diferença entre declaração e inicialização? Simples:

Aqui apenas declaramos a variável meunome.

Já nesta parte iniciamos seu conteúdo como Jonatan.

Este é o mesmo procedimento feito com as funções:

E agora o código executou sem erro porque toda declaração de função não anônima é elevada para o topo do escopo.

Fácil não é? Com isso aprendemos que é uma boa prática declarar e/ou iniciar variáveis e funções no início do escopo:

Boas práticas nos levam a caminhos melhores.