JavaScript
Diferencia el lenguaje JavaScript del runtime que aporta Event Loop, temporizadores, red, DOM y otros mecanismos para coordinar trabajo asíncrono.
JavaScript es un lenguaje; el runtime es el entorno que lo ejecuta y añade capacidades como temporizadores, red, archivos, consola o DOM.
JavaScript
├─ sintaxis y valores
├─ funciones, objetos y promesas
└─ reglas de ejecución
Runtime
├─ motor de JavaScript
├─ Event Loop
├─ APIs del entorno
└─ colas y mecanismos de comunicaciónEl código síncrono avanza una instrucción a la vez dentro del Call Stack.
console.log("A");
calculateTotal();
console.log("B");B no se ejecuta hasta que calculateTotal termina o lanza.
Una operación asíncrona permite iniciar trabajo cuyo resultado estará disponible después.
const promise = fetch("/api/products");
console.log("Request started");La llamada retorna sin esperar toda la respuesta. Eso no significa que JavaScript ejecute automáticamente dos cuerpos de código al mismo tiempo.
El hilo principal del navegador coordina concurrencia mediante el Event Loop. Algunas tareas pueden realizarse fuera de ese hilo por el navegador, el sistema operativo, workers o servicios externos.
setTimeout(callback, 1000);
fetch(url);
document.querySelector("button");Estas APIs no forman parte del núcleo de ECMAScript. Un runtime puede ofrecer otras:
process.env;
Buffer.from("text");Estas pertenecen a Node.js.
Una página, un worker y otro proceso pueden tener:
No asumas que todo JavaScript de una aplicación vive dentro del mismo contexto.
const start = Date.now();
while (Date.now() - start < 3000) {
// Trabajo síncrono durante tres segundos.
}Mientras este bucle ocupa el stack, el hilo principal no puede atender otros callbacks. En un navegador, la interfaz puede dejar de responder.
async function calculate() {
heavySynchronousWork();
}Declarar una función async no mueve heavySynchronousWork a otro hilo. El trabajo síncrono se ejecuta normalmente hasta alcanzar un await que realmente suspenda la continuación.
Cada API define cómo entrega su resultado.
1. JavaScript ejecuta el trabajo actual.
2. El entorno realiza o espera otras operaciones.
3. Cuando existe una continuación lista, se encola.
4. El Event Loop decide cuándo puede ejecutarse.
5. La callback entra nuevamente al Call Stack.function startApplication() {
console.log("Starting");
loadConfiguration()
.then((configuration) => {
initialize(configuration);
});
console.log("Request scheduled");
}La callback de then no interrumpe el código síncrono actual. Se ejecutará cuando la promesa se resuelva y el runtime pueda procesar su continuación.
async mueve código a otro hilo.¿Por qué una función async todavía puede bloquear la interfaz?
Porque el código síncrono de la función se ejecuta en el hilo actual. async cambia el contrato de retorno y permite usar await, pero no traslada automáticamente cálculos pesados a otro hilo.
Event Loop explica cómo el runtime coordina el stack, las colas y las oportunidades de ejecutar nuevas continuaciones.