Aula 71 — Event Loop

Até agora, entendemos que o JavaScript:

• Executa código de forma síncrona
• Usa o Call Stack para controlar a execução
• Executa uma coisa por vez

Mas então surge a grande pergunta:

como o JavaScript lida com tarefas assíncronas se ele executa uma coisa por vez?

A resposta está no Event Loop.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender o papel do Event Loop
• Compreender como tarefas assíncronas são tratadas
• Visualizar a interação entre Call Stack e filas
• Deixar de tratar o Event Loop como mágica

O problema que o Event Loop resolve

Imagine este código:

 
  console.log("Início");
  setTimeout(() => 
  {
    console.log("Timeout");
  }, 0);
  console.log("Fim");

Qual será a ordem?

Resultado no console

 
  console.log("Início"); // Saída: Início
  console.log("Fim");
  // Saída: Fim
  // Depois...
  // Saída: Timeout

Mesmo com setTimeout igual a 0, o código dentro dele não executa imediatamente.

Isso só faz sentido quando entendemos o Event Loop.

As peças do quebra-cabeça

Para entender o Event Loop, precisamos conhecer três componentes:

• Call Stack
• Task Queue (fila de tarefas)
• Event Loop

Call Stack (relembrando)

O Call Stack:

• Executa código síncrono
• Uma função por vez
• Bloqueia enquanto executa

Task Queue (fila de tarefas)

A Task Queue é onde ficam:

• Callbacks de setTimeout
• Eventos de clique
• Eventos do DOM

Essas tarefas ficam esperando para serem executadas.

O papel do Event Loop

O Event Loop é um processo que:

• Observa o Call Stack
• Verifica se ele está vazio
• Move tarefas da fila para a pilha

Ele nunca executa código diretamente.

Passo a passo do exemplo

Vamos acompanhar o código:

• console.log("Início") entra no Call Stack
• setTimeout é registrado
• O callback vai para a Task Queue
• console.log("Fim") executa
• Call Stack fica vazio
• Event Loop move o callback do timeout para o Call Stack

Por isso o Timeout vem por último.

Importante: tempo zero não é imediato

Significa:

Execute quando o Call Stack estiver livre.

JavaScript continua sendo single-thread

Mesmo com Event Loop:

• Uma função por vez
• Uma execução por vez

O Event Loop apenas organiza a ordem.

Por que isso é tão importante?

Porque o Event Loop explica:

• Por que operações longas travam a página
• Por que callbacks existem
• Por que Promises existem
• Por que async/await existe

Nada disso é mágica.

Na próxima aula, vamos aprofundar esse modelo entendendo Microtasks e Macrotasks — o detalhe fino que diferencia código bom de código excelente.