DEV Community: obrenoco

🔥🕺🏼JavaScript em Imagens: Hoisting

obrenoco — Sat, 05 Nov 2022 23:20:47 +0000

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 de undefinede as variáveis com a palavra-chave letand constsã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.

✨♻️ JavaScript em Imagens: Loop de Eventos

obrenoco — Fri, 04 Nov 2022 20:52:26 +0000

Oh céus, o loop de eventos.
É uma daquelas coisas que todo mundo que desenvolve em JavaScript tem que lidar de uma forma ou de outra, mas pode ser um pouco confuso de entender no início. Eu aprendo melhor de uma maneira mais visual, então pensei em tentar ajudar explicando de maneira visual através de gifs de baixa resolução.
Mas primeiro, o que é o loop de eventos e por que você deveria se importar?

JavaScript é single-threaded: apenas uma tarefa pode ser executada por vez. Normalmente isso não faz muita diferença, mas agora imagine que você está executando uma tarefa que leva 30 segundos. Toda a interface do usuário ficará travada por 30 segundos. 😬 É 2022, ninguém quer um site lento e sem resposta.

Felizmente, o navegador nos oferece alguns recursos que o próprio mecanismo JavaScript não fornece: uma API da Web. Isso inclui a DOM API, setTimeout(), requests HTTP e assim por diante. Isso pode nos ajudar a criar um comportamento assíncrono e sem bloqueio 🚀

Quando invocamos uma função, ela é adicionada a algo chamado pilha de chamadas - callstack. A pilha de chamadas faz parte do mecanismo JS, isso não é específico do navegador. É uma pilha, o que significa que o que está embaixo foi o primeiro a entrar e o último a sair (pense em uma pilha de panquecas). Quando uma função retorna um valor, ela é retirada da pilha 👋

A função respond() retorna uma função setTimeout(). O setTimeout() é fornecido pela API da Web: ele permite atrasar tarefas sem bloquear o thread principal. A função de callback que passamos para a função setTimeout(), a arrow function () => { return 'Hey' } é adicionada à API da Web. Enquanto isso, a função setTimeout() e a função respond() são retiradas da pilha, e ambas retornam seus valores!

Na Web API, um cronômetro é executado durante o tempo do segundo argumento que passamos para ele, 1000ms. O callback não é adicionado imediatamente à pilha de chamadas, em vez disso, é passado para algo chamado fila - queue.

Esta parte pode ser um pouco confusa: isso não significa que a função de callback seja adicionada à pilha de chamadas (retornando um valor) após 1000ms! Ele simplesmente é adicionado à fila após 1000ms. Mas é uma fila, a função tem que esperar a sua vez!
Agora esta é a parte que todos estávamos esperando... É hora do event loop fazer sua única tarefa: conectar a fila (queue) com a pilha de chamadas (call stack)! Se a pilha de chamadas estiver vazia, e se todas as funções invocadas anteriormente retornaram seus valores e foram retiradas da pilha, o primeiro item da fila será adicionado à pilha de chamadas. Nesse caso, nenhuma outra função foi chamada, o que significa que a pilha de chamadas estava vazia quando a função de callback foi o primeiro item da fila.

O callback é adicionado à pilha de chamadas, é invocado, retorna um valor e é retirado da pilha.

Ler um artigo é divertido, mas você só ficará totalmente confortável com isso trabalhando com ele repetidamente. Tente descobrir o que é registrado no console se executarmos o seguinte:

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");

bar();
foo();
baz();

Entendeu? Vamos dar uma olhada rápida no que está acontecendo quando estamos executando este código em um navegador:

Invocamos bar(). bar() retorna uma função setTimeout().
O callback que passamos para setTimeout() é adicionado à Web API, a função setTimeout() e bar() são retiradas da pilha de chamadas.
O cronômetro é executado, enquanto isso foo() é invocado e registrado em primeiro lugar. foo() retorna (undefined), baz() é invocado e o callback é adicionado à fila.
baz() logga Third. O loop de eventos vê que a pilha de chamadas está vazia após o retorno de baz(), após o qual o callback é adicionado à pilha de chamadas.
O callback logga Second.

Espero que isso faça você se sentir um pouco mais confortável com o loop de eventos! Não se preocupe se ainda parecer confuso, o mais importante é entender de onde certos erros/comportamentos podem vir para pesquisar no Google os termos certos com eficiência e acabar na página correta do Stack Overflow 💪🏼 Sinta-se à vontade para entrar em contato comigo se você tiver alguma dúvida!

Essa é uma tradução da série de artigos JavaScript Visualized criado com maestria por Lydia Hallie.