EventLoop Javascript
EventLoop Javascript
¿Te has preguntado alguna vez cómo funciona el proceso de ejecución de código en JavaScript? ¿Cómo el lenguaje gestiona la prioridad entre distintos bloques o maneja las llamadas asíncronas siendo un solo hilo de ejecución (single thread)?
El mecanismo clave que rige este comportamiento es el Event Loop de JavaScript.
Para comprender su funcionamiento, es esencial familiarizarse con los diferentes componentes dentro del entorno de ejecución de JavaScript.
Componentes del Entorno de Ejecución de JavaScript
Motor de JavaScript
Dado que el navegador no puede procesar directamente los archivos de JavaScript, entra en juego el motor de JavaScript. Es la base del funcionamiento del lenguaje y está compuesto por el heap y el call stack.
Heap
El heap es donde se almacenan los datos en memoria. Aunque su gestión puede ser compleja, para simplificar esta explicación, nos centraremos en otros aspectos.
Call Stack
El Call Stack es donde se apilan las llamadas para ejecutar nuestro código. Sin embargo, ¿qué sucede si una operación tarda demasiado en ejecutarse? ¿Se detendrán las demás? Para evitar este problema, JavaScript delega estas tareas a las Web APIs.
Web APIs
Al desarrollar para la web, nos encontramos con una variedad de Web APIs que interactúan con el navegador para resolver tareas que pueden tomar tiempo, volviéndolas asíncronas. Estas tareas se completan y retornan en forma de callbacks o promesas.
Algunas de las Web APIs más comunes son: fetch, setTimeout, DOM, localStorage, sessionStorage, HTMLDivElement, document, URL, XMLHttpRequest.
Cola de Tareas (Task Queue)
Las llamadas a las Web APIs que devuelven resultados en forma de callbacks se enfilan en la cola de tareas. Estas incluyen interacciones con el DOM, peticiones HTTP, temporizadores, entre otras.
Considera el siguiente bloque de código como ejemplo:
console.log("Inicio del ejemplo");
setTimeout(() => {
console.log("Espera dos segundos");
}, 2000);
console.log("Fin del ejemplo");
este es el comienzo del ejemplo
este es el fin del ejemplo
espero dos segundos
Al ejecutar este código, los console.log se envían directamente al Call Stack y se ejecutan, resultando en:
- "Inicio del ejemplo"
- "Fin del ejemplo"
La función setTimeout, con un retraso de 2 segundos, se maneja a través de una Web API. Una vez que se resuelve, se envía a la cola de tareas para su ejecución.
Cola de Microtareas (Microtask Queue)
Las promesas, cuando se resuelven, envían sus manejadores .then, .catch o .finally a la cola de microtareas. Estos manejadores se ejecutan de forma asíncrona, incluso si la promesa se resuelve de inmediato. Las microtareas tienen prioridad sobre las tareas en la cola de tareas.
Por ejemplo:
let promise = Promise.resolve();
promise.then(() => alert("Promesa resuelta"));
alert("Código finalizado"); // Esta se ejecuta primero
Event Loop
El Event Loop es un mecanismo fundamental en JavaScript que garantiza que el código asíncrono se maneje de manera eficiente. Funciona continuamente, supervisando el Call Stack y las colas de tareas (Task Queue) y microtareas (Microtask Queue).
Cuando el motor de JavaScript encuentra una tarea asíncrona, como una llamada a setTimeout o una operación de red, delega esta tarea a las Web APIs del navegador. Mientras tanto, el código JavaScript sigue ejecutándose en el Call Stack. Cuando la tarea asíncrona se completa, se encola en la Task Queue.
Aquí es donde entra en juego el Event Loop: su función principal es verificar si el Call Stack está vacío. Si lo está, toma la primera tarea de la Task Queue y la coloca en el Call Stack para su ejecución. Esto significa que las tareas asíncronas esperan su turno en la cola hasta que el Call Stack esté libre.
Sin embargo, hay un detalle importante: las microtareas. Estas tienen prioridad sobre las tareas normales en la cola de tareas. Cuando el Call Stack se vacía, el Event Loop primero toma todas las microtareas de la Microtask Queue y las ejecuta en orden de llegada, antes de volver a las tareas normales en la Task Queue.
Este comportamiento es crucial para garantizar que las promesas y sus manejadores .then, .catch y .finally se ejecuten de manera oportuna y predecible, incluso en situaciones donde el código asincrónico y síncrono se entrelaza.
En resumen, el Event Loop en JavaScript garantiza un flujo de ejecución ordenado y eficiente, priorizando las microtareas antes que las tareas normales, y asegurando que el código asíncrono se maneje correctamente dentro del contexto de un solo hilo de ejecución. Esta estructura es fundamental para el desarrollo de aplicaciones web modernas y la gestión de operaciones asíncronas de manera segura y efectiva.
