Hoisting é um daqueles termos que toda pessoa que desenvolve em JS já ouviu falar porque você pesquisou um erro irritante no Google, acabou no StackOverflow e a pessoa disse que esse erro foi causado por hoisting 🙃. Afinal, o que é hoisting? (PS: o escopo será abordado em outro post, eu gosto de manter posts pequenos e focados)
Se você é iniciante no JavaScript, pode ter experimentado um comportamento “estranho” onde algumas variáveis são aleatoriamente undefined, algumas ReferenceError s são lançadas e assim por diante. Hoisting é frequentemente explicado como colocar variáveis e funções no topo do arquivo , mas não, não é isso que está acontecendo, embora o comportamento possa parecer 😃.
Quando o mecanismo JS pega nosso script, a primeira coisa que ele faz é configurar a memória para os dados em nosso código. Nenhum código é executado neste momento, ele está simplesmente preparando tudo para execução. A maneira como as declarações de funções e variáveis são armazenadas é diferente. As funções são armazenadas com uma referência à função inteira .
Com variáveis é um pouco diferente. O ES6 introduziu duas novas palavras-chave para declarar variáveis: lete const. Variáveis declaradas com as palavras-chave letor constsão armazenadas como uninitialized.
As variáveis declaradas com a palavra-chave var são armazenadas com o valor padrão de undefined.
Agora que a fase de criação está concluída, podemos realmente executar o código. Vamos ver o que acontece se tivéssemos 3 comandos console.log() no topo do arquivo, antes de declararmos a função ou qualquer uma das variáveis.
Como as funções são armazenadas com uma referência a todo o código da função, podemos invocá-las antes mesmo da linha em que as criamos! 🔥
Quando referenciamos uma variável declarada com a palavra-chave var antes de sua declaração, ela simplesmente retornará seu valor padrão com o qual foi armazenada: undefined! No entanto, isso às vezes pode levar a um comportamento "inesperado". Na maioria dos casos, isso significa que você está fazendo referência a ele sem querer (você provavelmente não quer que ele realmente tenha o valor de undefined) 😬
Para evitar a possibilidade de referenciar acidentalmente uma variável undefined, como poderíamos com a palavra-chave var, uma ReferenceErroré lançada sempre que tentamos acessar variáveis não inicializadas . A "zona" antes de sua declaração real é chamada de zona morta temporal (ou temporal dead zone): você não pode referenciar as variáveis (isso inclui classes ES6 também!) antes de sua inicialização.
Quando o mecanismo passa a linha na qual declaramos as variáveis, os valores na memória são substituídos pelos valores com os quais realmente os declaramos.
Prontinho! 🎉 Recapitulando rapidamente:
- Funções e variáveis são armazenadas na memória para um contexto de execução antes de executarmos nosso código. Isso é chamado de hoisting.
- As funções são armazenadas com uma referência a todas as funções, as variáveis com a
varpalavra-chave com o valor deundefinede as variáveis com a palavra-chaveletandconstsão armazenadas não inicializadas.
Espero que o termo hoisting seja um pouco menos vago agora que analisamos o que está acontecendo quando executamos nosso código. Como sempre, não se preocupe se ainda não fizer muito sentido. Você ficará muito mais confortável com ele quanto mais trabalhar com ele. Sinta-se à vontade para me pedir ajuda, será um prazer ajudar! 😃
Essa é uma tradução da série de artigos JavaScript Visualized criado com maestria por Lydia Hallie.
Top comments (0)