Entendendo o Event Loop do Java Script
Event Loop é uma daquelas coisas com que todo desenvolvedor de JavaScript precisa lidar de uma forma ou de outra, mas pode ser um pouco confuso de entender no início. Mas primeiro, o que é o Event Loop e porque você deveria se importar?
Introdução:
JavaScript é single-thread, apenas uma tarefa pode ser executada por vez. Normalmente essa caracteristica não é prejudicial, mas agora imagine que você necessita executar uma tarefa que leva 30 segundos. Durante essa tarefa, estamos esperando por 30 segundos antes que qualquer outra coisa possa acontecer (JavaScript é executado no thread principal do navegador por padrão, então toda a UI fica bloqueada) estamos em 2020, ninguém quer um site lento e sem resposta.
E agora?
Felizmente, o navegador nos oferece alguns recursos que o próprio mecanismo JavaScript não oferece: uma Web API. Isso inclui a API DOM, setTimeout, solicitações HTTP e assim por diante. Isso pode nos ajudar a criar comportamentos assíncronos e não bloqueantes.
Como tudo acontece
Quando invocamos uma função, ela é adicionada à pilha de chamadas (call stack). Essa pilha faz parte do mecanismo JS, não é específico do navegador. É uma pilha, o que significa que é o primeiro a entrar, o último a sair (pense em uma pilha de pratos). Quando uma função retorna um valor, ela é retirada da pilha.
- As funções são enviadas para a pilha de chamadas quando são invocadas e retiradas quando retornam um valor (Imagem 1)
- A função sayHello retorna uma função setTimeout. O setTimeout nos é fornecido pela API da Web: ele nos permite atrasar tarefas sem bloquear o thread principal. A função de retorno de chamada que passamos para a função setTimeout, a função () => {return ‘Hello World’} é adicionada à API da Web. Nesse ínterim, a função setTimeout e a função sayHello são retiradas da pilha, ambas retornam seus valores! (Imagem 2)
- Na API da Web, um cronômetro (timer) é executado enquanto o segundo argumento que passamos para ele, 1000 ms. O retorno de chamada não é adicionado imediatamente à pilha de chamadas, em vez disso, é passado para algo chamado fila (Queue). Pode ser uma parte confusa, não significa que a função retornada seja adicionada à pilha após 1000 ms mas sim à fila. Mas é uma fila, então a função tem que esperar a sua vez para ser executada.. (Imagem 3)
- Agora, esta é a parte que todos estávamos esperando, o Event Loop fazer sua única tarefa, que é conectar a fila com a pilha de chamadas. Se a pilha estiver vazia, ou seja se todas as funções invocadas anteriormente retornaram seus valores e já foram retiradas da pilha, o primeiro item da fila é adicionado à pilha de chamadas. Nesse caso, nenhuma outra função foi chamada, o que significa que a pilha de chamadas estava vazia no momento em que a função de retorno era o primeiro item da fila. (Imagem 4)
- O retorno de chamada é adicionado à pilha de chamadas, é invocado e retorna um valor e é retirado da pilha. (Imagem 5)
Conclusão
O conceito do event loop pode ser um tanto complicado no início mas uma vez que você entender seu funcionamento na prática você não conseguirá mais imaginar sua vida sem ele. Uma propriedade muito interessante do modelo, é que o JavaScript, ao contrário de muitas outras linguagens, nunca bloqueia. Espero que tenham conseguido entender como o js funciona e também que essa visão ajude vocês a escreverem códigos de uma maneira que tire mais proveito dessa arquitetura.
