Como o event loop organiza a execução do JavaScript

David Alves de Souza — Wed, 15 Apr 2026 21:45:23 +0000

Faaala, pessoal. Tudo certo?

Este ano, decidi finalmente iniciar um projeto que estava engavetado há muito tempo: uma série de conteúdos sobre conceitos fundamentais para entrevistas técnicas de front-end (e também dar aquela força para identificar problemas reais em aplicações JavaScript).

A ideia é simples: em cada post, explorar um conceito recorrente nessas entrevistas, com exemplos práticos, erros comuns e aprendizados que tive ao longo da carreira.

Começando por um clássico que muita gente acha que entende, mas nem sempre domina: o event loop.

A maioria dos devs JavaScript sabe que o event loop existe. Poucos sabem exatamente o que ele faz.

O JavaScript é single-threaded, ou seja, significa que ele executa uma coisa por vez, e o event loop é o mecanismo que decide o quê e quando. Ele coordena três camadas: a call stack, a fila de microtasks e a fila de macrotasks.

A call stack executa o código síncrono e quando ela esvazia, o event loop não vai direto para a próxima macrotask, ele primeiro percorre completamente a fila de microtasks. Só depois, com a fila de microtasks vazia, é que a fila de macrotasks é processada.

Microtasks incluem callbacks de Promises (.then, .catch, .finally) e queueMicrotask. Macrotasks incluem setTimeout, setInterval e eventos de I/O.

É por isso que Promise.resolve().then() sempre roda antes de setTimeout(() => {}, 0), mesmo que o timeout seja zero. O zero não significa "imediato", significa "na próxima macrotask disponível".

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

// Saída: 1 -> 4 -> 3 -> 2

O erro clássico em entrevista: afirmar que setTimeout com delay zero executa logo após o código síncrono. Na prática, ele entra na fila de macrotasks e aguarda todas as microtasks pendentes serem resolvidas, inclusive microtasks que geram outras microtasks.

Entender de verdade o event loop faz diferença na prática, separa quem apenas decora sintaxe de quem realmente entende como o código se comporta por baixo dos panos. Mais do que um detalhe técnico, esse conhecimento é a base para prever a ordem de execução e evitar bugs silenciosos em aplicações assíncronas complexas.

Hora do Desafio: Qual é a ordem de saída deste código?

console.log('start');

setTimeout(() => console.log('timeout 1'), 100);

setTimeout(() => console.log('timeout 2'), 0);

Promise.resolve()
  .then(() => console.log('promise 1'))
  .then(() => console.log('promise 2'));

console.log('end');

Tenta responder nos comentários antes de rodar o código.

📚 Referências para aprofundar:

Sobre Event Loop e música clássica

David Alves de Souza — Thu, 14 Mar 2024 23:23:04 +0000

Já teve curiosidade para entender como o Event Loop controla o que vai ser executado no Javascript?
Provavelmente você já deve ter visto uma orquestra em ação, mostrando toda a sua organização e precisão, enquanto executa peças clássicas e complicadas, certo?
Bem, agora imagine o JavaScript como uma orquestra complexa, onde diferentes instrumentos tocam em perfeita harmonia. O maestro dessa orquestra é o Event Loop, um mecanismo crucial que garante o ritmo e a fluidez da música.

Mas o que realmente faz o Event Loop funcionar?
As filas de eventos (event queue) e tarefas (task queue), os bastidores da espetáculo musical do JavaScript!

A Fila de Eventos: A Sala de Espera da Orquestra

A fila de eventos é como a sala de espera da orquestra. Aqui, os eventos, como cliques em botões, pressionamentos de teclas ou timers, aguardam pacientemente sua vez de subir ao palco. Cada evento é como um músico com um instrumento específico, pronto para contribuir para a melodia.

A Fila de Tarefas: O Backstage da Orquestra

Enquanto a fila de eventos guarda os músicos, a fila de tarefas é o backstage da orquestra. Aqui, os scripts, como funções e callbacks, aguardam para serem executados. São as partituras que guiam a performance da banda.

O Maestro Event Loop em Ação:

O Event Loop, é como um maestro diligente, alterna sua atenção entre as duas filas:

Primeiro, ele verifica a fila de eventos: Se um músico está pronto, o maestro o convida para o palco e sua música é tocada (o evento é executado).
Se a fila de eventos está vazia, o maestro se volta para a fila de tarefas: Se uma partitura precisa ser tocada, o maestro a entrega ao próximo músico disponível (a tarefa é executada).
E o ciclo se repete, como um ritmo constante: O maestro verifica as filas, alterna entre os músicos e partituras, garantindo que a música nunca pare.

Por exemplo:
Imagine que você clicou em um botão. O evento "clique" é adicionado à fila de eventos. O Event Loop verifica a fila e, ao encontrar o evento, o remove e executa a função associada ao clique do botão. A função, como um músico talentoso, toca sua melodia, realizando a ação desejada.

Dominando as Filas para uma Orquestra Perfeita:

Compreender as filas de eventos e tarefas é fundamental para dominar o Event Loop e garantir uma experiência musical impecável:

Entenda as prioridades: Nem todos os eventos são iguais. Alguns, como eventos de teclado, exigem atenção imediata, enquanto outros podem esperar.
Use callbacks com cuidado: Callbacks são ferramentas poderosas, mas usá-los em excesso pode criar um congestionamento na fila de tarefas, atrapalhando o ritmo da orquestra.
Evite loops infinitos: Loops infinitos são como músicos que tocam a mesma nota sem parar, bloqueando a fila de tarefas e impedindo o progresso da melodia.
Use as ferramentas de desenvolvedor: Ferramentas como o DevTools do Chrome te permitem visualizar as filas em ação, como um maestro observando sua orquestra, e depurar problemas de performance.

O Event Loop, as filas de eventos e tarefas são os pilares do JavaScript, trabalhando em conjunto para criar sites e aplicações interativas e dinâmicas. Ao entender esse sistema, você se torna um maestro capaz de reger a orquestra da web de forma fluida, proporcionando uma experiência musical única para seus usuários.