El Event Loop y la Concurrencia en JavaScript

JavaScript es un lenguaje monohilo (single-threaded), lo que significa que posee una única pila de ejecución (Call Stack) y solo puede ejecutar una instrucción a la vez.

Sin embargo, JavaScript es capaz de manejar miles de operaciones asíncronas concurrentes (peticiones de red, temporizadores, eventos de interfaz) sin bloquearse gracias al Event Loop (Bucle de Eventos) y a las APIs proporcionadas por el entorno de ejecución (el navegador o Node.js).

1. Componentes de la Arquitectura del Motor JS #

┌───────────────────────────┐         ┌───────────────────────────┐
  │       CALL STACK          │         │     Web APIs / Node C++   │
  │ (Pila de llamadas síncrona)│ ──────> │ (setTimeout, fetch, DOM)  │
  └─────────────┬─────────────┘         └─────────────┬─────────────┘
                │                                     │
                ▼                                     ▼
        ┌───────────────┐               ┌───────────────────────────┐
        │  EVENT LOOP   │ <──────────── │    MICROTASK QUEUE        │
        │               │               │ (Promise.then, queueMicro)│
        │  ¿Stack vacío?│               ├───────────────────────────┤
        │               │ <──────────── │     TASK QUEUE (MACRO)    │
        └───────────────┘               │ (setTimeout, setInterval) │
                                        └───────────────────────────┘

1. Call Stack (Pila de llamadas): Registra las funciones que se están ejecutando en orden LIFO (Last In, First Out).
2. Web APIs / Entorno: Hilos secundarios del navegador/Node que procesan peticiones HTTP, cuentas regresivas y eventos del DOM sin bloquear la pila principal.
3. Microtask Queue (Cola de Microtareas): Cola de alta prioridad para callbacks de promesas (.then(), .catch(), .finally()), queueMicrotask() y MutationObserver.
4. Task Queue / Macrotasks (Cola de Macrotareas): Cola para setTimeout, setInterval, setImmediate (Node) y eventos de usuario.
5. Event Loop: El vigilante constante que verifica si el Call Stack está vacío. Si está vacío, vacía primero toda la cola de microtareas antes de tomar la siguiente macrotarea.

2. El Orden de Prioridad de Ejecución #

El Event Loop sigue una regla estricta:

1. Ejecuta todo el código síncrono hasta vaciar el Call Stack.
2. Drena y ejecuta todas las Microtareas acumuladas.
3. El navegador realiza el renderizado visual de la página (si procede).
4. Toma y ejecuta una sola Macrotarea de la Task Queue.
5. Vuelve al paso 2 (revisa microtareas inmediatamente).

3. Ejemplo Práctico de Orden de Ejecución #

Analicemos el siguiente código para predecir su salida exacta:

 
1console.log("1. Síncrono inicio");
2
3setTimeout(() => {
4  console.log("2. Macrotarea (setTimeout)");
5}, 0);
6
7Promise.resolve().then(() => {
8  console.log("3. Microtarea 1 (Promise)");
9}).then(() => {
10  console.log("4. Microtarea 2 (Promise encadenada)");
11});
12
13queueMicrotask(() => {
14  console.log("5. Microtarea 3 (queueMicrotask)");
15});
16
17console.log("6. Síncrono fin");
Salida de consola
1. Síncrono inicio
6. Síncrono fin
3. Microtarea 1 (Promise)
5. Microtarea 3 (queueMicrotask)
4. Microtarea 2 (Promise encadenada)
2. Macrotarea (setTimeout)

Explicación paso a paso: #

1. Se ejecutan 1 y 6 síncronamente en el Call Stack.
2. setTimeout(..., 0) delega el temporizador a la Web API y se encola en la Task Queue (Macrotarea).
3. Las promesas y queueMicrotask se encolan en la Microtask Queue.
4. Al vaciarse el Call Stack, el Event Loop procesa todas las microtareas (3, 5, 4).
5. Finalmente, procesa la macrotarea de setTimeout (2).

4. queueMicrotask(): Encolar Microtareas Manualmente #

La función global queueMicrotask(callback) permite programar una función para que se ejecute justo antes de ceder el control al renderizado o a la siguiente macrotarea, sin necesidad de instanciar un Promise.resolve():

 
1function logOperacion(id) {
2  console.log(`Operación ${id} iniciada`);
3  queueMicrotask(() => {
4    console.log(`[Auditoría] Operación ${id} procesada`);
5  });
6}
7
8logOperacion(42);
9console.log("Código posterior en la función principal");
Salida de consola
Operación 42 iniciada
Código posterior en la función principal
[Auditoría] Operación 42 procesada