.jpg)
Me encanta profundizar en las partes "extrañas" de JavaScript y, especialmente cuando preparo entrevistas técnicas o depuro por qué una actualización de la interfaz no se renderiza, es crítico entender no solo qué hace el lenguaje sino cómo lo programa el sistema de ejecución.
El desafío: imagina este fragmento de código: console.log(1 Start); setTimeout(()=>{ console.log(2 Timeout); },0); Promise.resolve().then(()=>{ console.log(3 Promise); }); console.log(4 End); ¿En qué orden se imprimen los números?
Mucha gente piensa razonando de forma lineal: primero Start y End, luego los asíncronos según quién sea más rápido. Sin embargo la salida real en la mayoría de entornos es: 1 Start 4 End 3 Promise 2 Timeout. ¿Por qué sucede esto si setTimeout tiene un retardo de 0?
La respuesta está en el modelo del bucle de eventos. JavaScript usa un solo hilo de ejecución y un mecanismo llamado Event Loop. Visualiza estas piezas clave: el Call Stack donde corre el código síncrono; las Web APIs o la capa de sistema que maneja temporizadores y operaciones I/O; y las colas o queues donde se colocan las callbacks.
Hay dos colas principales que importan aquí: la cola de macrotareas que recibe timers como setTimeout, setInterval y operaciones I/O; y la cola de microtareas que contiene callbacks de Promise then catch finally, queueMicrotask y MutationObserver. Regla de oro: justo después de que el Call Stack queda vacío, el Event Loop ejecuta un checkpoint de microtareas y procesa la cola de microtareas de forma exhaustiva antes de pasar a la siguiente macrotarea. Las microtareas son la fila VIP y pueden encadenarse indefinidamente dentro del mismo ciclo.
Siguiendo ese modelo paso a paso con el ejemplo: console.log 1 Start se ejecuta en el stack; setTimeout con 0ms se delega a las Web APIs y su callback se encola como macrotarea; Promise.resolve().then encola su callback como microtarea; console.log 4 End se ejecuta en el stack. Cuando el stack queda vacío, el Event Loop procesa primero la microtarea Promise y muestra 3 Promise. Solo cuando la cola de microtareas está vacía se podrá ejecutar la macrotarea del timer, mostrando 2 Timeout. En navegadores, el renderizado ocurre después de las microtareas y antes de la siguiente macrotarea.
Pequeño apunte para desarrolladores Node.js: existe una cola super VIP llamada process.nextTick que se ejecuta incluso antes que las Promises. process.nextTick no forma parte de las fases clásicas del Event Loop y puede bloquear I/O si se abusa de ella.
Resumen rápido y práctico: Síncrono ejecuta primero en el Call Stack; Microtareas como Promises se ejecutan inmediatamente después de que el stack queda vacío y antes de render y nuevas macrotareas; Render en navegador ocurre tras microtareas; Macrotareas como setTimeout se ejecutan solo cuando stack y microtask queue están vacíos.
En Q2BSTUDIO aplicamos estos principios de arquitectura y rendimiento cuando desarrollamos aplicaciones y software a medida, optimizando la respuesta y la escalabilidad de interfaces y servicios. Si buscas desarrollar una solución a medida, conoce nuestras capacidades en desarrollo de aplicaciones y software a medida. Si además quieres potenciar tus productos con aprendizaje automático y agentes de IA, ofrecemos soluciones de inteligencia artificial y ia para empresas que integran modelos y automatización, más información en servicios de inteligencia artificial.
Además de software a medida e inteligencia artificial, Q2BSTUDIO trabaja en ciberseguridad y pentesting, servicios cloud aws y azure, servicios inteligencia de negocio y power bi, agentes IA y automatización de procesos, garantizando soluciones completas y seguras para productos digitales. Si necesitas ejemplos concretos, trucos para entrevistas o ayuda para optimizar el rendimiento de tu aplicación, en Q2BSTUDIO podemos ayudarte a diseñar y ejecutar la solución adecuada.
Si te interesa, comparte tu snippet favorito que te haya dejado confundido y lo analizamos con este modelo del Event Loop para que quede claro y lo puedas aplicar en producción.
