🔥🕺🏼JavaScript em Imagens: Hoisting
Tags: javascript
Published: 2022-11-05 23:20:47


*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** .

![01 - HOISTING.gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42pslfxdyz4i4w5w6r4w.gif)
Com variáveis é um pouco diferente. O ES6 introduziu duas novas palavras-chave para declarar variáveis: `let`e `const`. Variáveis declaradas com as palavras-chave `let`or `const`são armazenadas  como `uninitialized`.
![02 - HOISTING (1).gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hb7wctpuz1o57bbru1fv.gif)

As variáveis declaradas com a palavra-chave `var` são armazenadas com o valor padrão de `undefined`.
![03 - HOISTING (4).gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0u2fw1j61s27g53wuagq.gif)
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! 🔥
![04 - HOISTING (1).gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oldpnjxrcijt0ge4wj8d.gif)
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`) 😬
![05 - Hoisting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dz478efzvil1y0ly6mtn.gif)
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.
![06 - HOISTING (1).gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8ucxqehyzu52h4u1w8r.gif)

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.
![07 - HOISTING.gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ycyrbdppncl78oeqiq7a.gif)
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 `var`palavra-chave com o valor de `undefined`e as variáveis com a palavra-chave `let`and `const`sã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](https://dev.to/lydiahallie/series/3341) criado com maestria por [Lydia Hallie](https://dev.to/lydiahallie).