El event loop

// ════════════════════════════════════════════════════════════════════════════
// NIVEL OK — "funciona"
//
// Implementa los cuatro pasos con su mecanismo natural y observa el orden REAL en
// la consola:
//   1 · render inicial   (síncrono)
//   4 · fin síncrono     (síncrono)
//   2 · caché aplicada   (microtarea)
//   3 · servidor         (macrotarea)
// Es decir: 1, 4, 2, 3. Y ojo al paso 4: ve heroe = null, porque la caché (paso 2)
// es una microtarea que aún NO ha corrido cuando se ejecuta el síncrono.
//
// Su límite: funciona y se observa el orden, pero no explica POR QUÉ sale así.
// ════════════════════════════════════════════════════════════════════════════
// valor en caché (viejo)
const cacheHeroe = { nombre: "Tracer", winrate: 0.62 };
// valor fresco del servidor
const servidorHeroe = { nombre: "Tracer", winrate: 0.65 };

// lo que mostraríamos ahora mismo (aún sin datos)
let heroe = null;

// PASO 1 — render inicial (síncrono): corre ya, en la pila.
console.log("1 · render inicial · heroe = " + heroe);

// PASO 2 — caché (microtarea): el .then de una promesa resuelta va a la cola de microtareas.
Promise.resolve(cacheHeroe).then((h) => {
  // aplicamos el valor de caché
  heroe = h;
  console.log("2 · caché aplicada · " + h.nombre);
});

// PASO 3 — servidor (macrotarea): el callback de setTimeout va a la cola de tareas.
setTimeout(() => {
  // refrescamos con el dato fresco
  heroe = servidorHeroe;
  console.log("3 · servidor · " + servidorHeroe.nombre);
}, 0);

// PASO 4 — comprobación síncrona: corre ANTES de vaciar la pila, así que heroe sigue null.
console.log("4 · fin del trozo síncrono · heroe = " + heroe);

// ════════════════════════════════════════════════════════════════════════════
// NIVEL MEJOR — "pulido"
//
// Por qué mejora a OK: explica, desde el modelo, POR QUÉ el orden es 1, 4, 2, 3.
//   - 1 y 4 son SÍNCRONOS: corren en la pila, en orden de línea, antes que nada.
//   - 2 (caché) es una MICROtarea: aunque el valor esté listo al instante, entregarlo
//     con un .then lo aplaza a la cola de microtareas, que se drena al vaciarse la pila.
//   - 3 (servidor) es una MACROtarea: se atiende después de TODAS las microtareas.
//   Y el detalle clave: el paso 4 ve heroe = null porque la microtarea de la caché
//   todavía no ha corrido cuando el síncrono llega a esa línea.
//
// Su límite respecto a Excelente: no toca el matiz del `await` ni lo conecta con el
// bug de asincronía que de verdad depuras en empresa.
// ════════════════════════════════════════════════════════════════════════════
// valor en caché (viejo)
const cacheHeroe = { nombre: "Tracer", winrate: 0.62 };
// valor fresco del servidor
const servidorHeroe = { nombre: "Tracer", winrate: 0.65 };

// lo que mostraríamos ahora mismo (aún sin datos)
let heroe = null;

// 1 — SÍNCRONO: corre en la pila, en orden de línea. Sale el primero.
console.log("1 · render inicial · heroe = " + heroe);

// 2 — MICROtarea: el .then se encola en microtareas; corre al vaciarse la pila,
// antes que cualquier macrotarea, aunque el valor de la caché ya estuviera listo.
Promise.resolve(cacheHeroe).then((h) => {
  heroe = h;
  console.log("2 · caché aplicada · " + h.nombre);
});

// 3 — MACROtarea: el setTimeout se encola en tareas; se atiende tras drenar TODAS
// las microtareas. Por eso el servidor sale el último, aunque su retardo sea 0.
setTimeout(() => {
  heroe = servidorHeroe;
  console.log("3 · servidor · " + servidorHeroe.nombre);
}, 0);

// 4 — SÍNCRONO: corre todavía en la pila, antes de la microtarea de la caché.
// Por eso aquí heroe sigue siendo null: la caché aún no se ha aplicado.
console.log("4 · fin del trozo síncrono · heroe = " + heroe);

// ════════════════════════════════════════════════════════════════════════════
// NIVEL EXCELENTE — "óptimo"
//
// Por qué mejora a Mejor:
//   - DEMUESTRA (no solo afirma) un matiz real: la continuación de un `await` también
//     es una MICROtarea, igual que un .then. La versión con await (2b) sale en la
//     MISMA cola que la caché —antes que el servidor—, no en la macrotarea.
//   - Deja ver que varias microtareas se drenan TODAS antes de la primera macrotarea:
//     2 y 2b salen seguidas, y solo después el servidor (3).
//   - Conecta con el bug de asincronía nº1 en empresa: leer un estado JUSTO DESPUÉS de
//     programar su actualización async (el paso 4) devuelve el valor viejo. Es el
//     "pero si ya lo actualicé / por qué sale el dato anterior" que depuras una y otra vez.
//
// Orden resultante: 1, 4 (síncronos) · 2, 2b (microtareas) · 3 (macrotarea).
// ════════════════════════════════════════════════════════════════════════════
// valor en caché (viejo)
const cacheHeroe = { nombre: "Tracer", winrate: 0.62 };
// valor fresco del servidor
const servidorHeroe = { nombre: "Tracer", winrate: 0.65 };

// lo que mostraríamos ahora mismo (aún sin datos)
let heroe = null;

// 1 — SÍNCRONO: primero, en la pila.
console.log("1 · render inicial · heroe = " + heroe);

// 2 — MICROtarea (vía .then): se encola en microtareas.
Promise.resolve(cacheHeroe).then((h) => {
  heroe = h;
  console.log("2 · caché aplicada · " + h.nombre);
});

// 2b — MICROtarea (vía await): lo que va DESPUÉS de un await se encola como microtarea,
// igual que un .then. Por eso 2b sale junto a la caché, no con el servidor.
(async () => {
  // la promesa ya está resuelta…
  const h = await Promise.resolve(cacheHeroe);
  // …pero la continuación (esto) corre como microtarea, no en la misma línea.
  console.log("2b · await (misma cola que la caché) · " + h.nombre);
})();

// 3 — MACROtarea: se atiende tras drenar TODAS las microtareas (2 y 2b).
setTimeout(() => {
  heroe = servidorHeroe;
  console.log("3 · servidor · " + servidorHeroe.nombre);
}, 0);

// 4 — SÍNCRONO: aquí heroe sigue null. Leer el estado justo después de programar su
// actualización async devuelve el valor viejo: el bug de asincronía más repetido.
console.log("4 · fin del trozo síncrono · heroe = " + heroe);