¿Cómo funciona el bucle de eventos (event loop) en la…

El ciclo de eventos en JavaScript (en el contexto del navegador web) es un mecanismo que permite realizar operaciones asíncronas sin bloquear el hilo principal de ejecución. Está compuesto por varios componentes:

Heap (Montón): Área de memoria donde se almacenan los objetos.
Pila de llamadas (Call Stack): Estructura de datos LIFO que rastrea la ejecución de funciones síncronas.
Web APIs: Proporcionadas por el navegador (DOM, AJAX, setTimeout, setInterval, Event Listeners, etc.). No forman parte del motor de JavaScript.
Cola de callbacks (Callback Queue) / Cola de tareas (Task Queue): Cola de mensajes para ejecutar tareas asíncronas.
Cola de microtareas (Microtask Queue): Cola prioritaria para microtareas (Promise.then(), async/await, queueMicrotask). Se ejecuta antes de la cola de tareas.
Event Loop (Bucle de eventos): Verifica continuamente la pila de llamadas y la cola. Si la pila está vacía, mueve el primer manejador de la cola de microtareas a la pila. Tras vaciar la cola de microtareas, mueve el primer manejador de la cola de tareas a la pila.

El proceso funciona así:

Se ejecuta código síncrono y las funciones se colocan en la pila de llamadas.
Cuando se encuentra una operación asíncrona (por ejemplo, setTimeout), se pasa al Web API correspondiente. La ejecución del código síncrono continúa.
El Web API realiza la operación en segundo plano.
Tras completar la operación asíncrona, el manejador (callback) de esa operación se coloca en la cola de tareas (para operaciones asíncronas normales) o en la cola de microtareas (para promesas).
El Event Loop verifica continuamente la pila de llamadas. Si está vacía:
- Verifica la cola de microtareas. Si hay manejadores, los mueve a la pila de llamadas para su ejecución, hasta que la cola de microtareas esté vacía.
- Luego verifica la cola de tareas. Si hay manejadores, mueve el primero a la pila de llamadas para su ejecución.
Este proceso se repite, permitiendo realizar operaciones asíncronas sin bloquear el hilo principal.

Ejemplo con setTimeout:

// Este código se ejecuta en la pila de llamadas
console.log('Start');

// setTimeout - Web API. El callback se coloca en la cola de tareas tras 0ms.
// La ejecución real puede retrasarse debido al ciclo de eventos.
setTimeout(() => {
  console.log('Timeout');
}, 0);

// Este código se ejecuta en la pila de llamadas después de setTimeout
console.log('End');

// Salida:
// Start
// End
// Timeout

Ejemplo con promesas:

// Se ejecuta en la pila de llamadas
console.log('A');

// La promesa. El callback de then() se coloca en la cola de microtareas
Promise.resolve().then(() => {
  console.log('B');
});

// Se ejecuta en la pila de llamadas
console.log('C');

// Salida:
// A
// C
// B

¿Cómo funciona el bucle de eventos (event loop) en la API web?