JavaScript de Cero a Experto / Asincronía I
El event loop: el restaurante por dentro
"¿Qué imprime este código y por qué?" — así empieza la pregunta técnica más repetida en entrevistas de JavaScript. La respuesta es el event loop: el mecanismo que coordina al único cocinero con todo lo que pasa "al tiempo". Hoy lo visualizas como un restaurante, pieza por pieza, y sales prediciendo órdenes de ejecución como quien lee un menú.
El restaurante completo
Con ese mapa, sigue el viaje de un setTimeout(fn, 2000): el mesero
recibe la orden y se la pasa a la cocina ("avísame en 2 segundos") — él no
espera, sigue atendiendo. A los 2 segundos, la cocina pone fn en la
barra. Y fn entra a ejecutarse cuando el mesero quede libre — por eso los
milisegundos son "no antes de": si el mesero está atrapado en un while de
3 segundos, el plato espera en la barra.
El experimento de entrevista
Cuatro líneas, cuatro protagonistas. ANTES de correr el playground, escribe en un papel el orden que predices:
El orden es A, B, C, D — y cada posición tiene su porqué:
- A y B primero: el código síncrono es el mesero con las manos ocupadas; NADA de las colas puede interrumpirlo.
- C antes que D: al quedar libre, el mesero vacía la bandeja VIP (microtareas) COMPLETA antes de tocar la barra normal. La reacción de la promesa le gana al timer — aunque el timer era de 0ms y se programó primero.
- D de último: los platos de la barra normal (timers, clics) entran de a uno, solo cuando no hay síncrono pendiente ni VIP esperando.
Reto mental inmediato: ¿y si hubiera DOS microtareas y un timer? Las dos microtareas completas, luego el timer. La bandeja VIP se vacía entera — esa es la que confunde a medio mundo.
¿Y esto para qué me sirve?
No es cultura general: explica bugs reales. ¿Por qué tu console.log
muestra el valor "viejo" aunque lo cambiaste "después"? ¿Por qué la
interfaz se actualiza al terminar tu función y no en la mitad? ¿Por qué un
setTimeout(fn, 0) "arregla" misteriosamente un problema de orden? Todo
es el mismo mecanismo: síncrono primero, VIP después, barra al final. Y
cuando en el módulo 10 encadenes peticiones a servidores de verdad, este
mapa será la diferencia entre depurar con criterio y mover líneas a ver si
funciona.
Nota honesta: el modelo tiene detalles finos (cada cuánto se repinta la pantalla, colas separadas por tipo de tarea) que no cambian la regla de oro. Con mesero + cocina + bandeja VIP + barra predices correctamente el 99% del código que verás — incluido todo el de este supercurso.
En una entrevista te muestran: setTimeout(() => console.log('timer'), 0); Promise.resolve().then(() => console.log('promesa')); console.log('fin'); — ¿qué orden imprime y por qué?
Mini-reto
Juega a ser el event loop: escribe un script con 2 console.log síncronos,
2 setTimeout de 0ms y 2 microtareas (Promise.resolve().then(...)),
todos revueltos e identificados con letras. Predice el orden completo EN
PAPEL, corre, y compara. Luego sube la apuesta: mete un tercer
Promise.resolve().then(...) DENTRO del primer .then — ¿sale antes o
después del primer timer? (Pista: las VIP que llegan mientras se vacía la
bandeja… también son VIP.)
Qué sigue
Ya tienes el mapa del restaurante. Ahora, el problema que motivó todo: ¿cómo encadenas tareas que tardan — "cuando llegue el titular, pide sus gastos; cuando lleguen, calcula el total"? La respuesta histórica fueron los callbacks… y su infame pirámide de la perdición. Próxima lección: el problema que las promesas vinieron a resolver.