Callbacks y el Event Loop

JavaScript asíncrono y Event Loop

• Single-threaded: JavaScript ejecuta una sola tarea a la vez, pero no bloquea porque delega tareas a APIs del navegador (timers, red, DOM). Esto explica por que un fetch no congela la UI.
• Call Stack: Pila donde se ejecutan funciones; si una funcion tarda, bloquea el hilo. Todo lo sincrono pasa por aqui.
• Web APIs + Colas: Al terminar tareas externas, los callbacks pasan a colas de macrotasks (setTimeout, setInterval, I/O) o microtasks (promesas). Se encolan, no se ejecutan de inmediato.
• Orden de ejecucion: Se vacia el stack, luego se procesan microtasks, y recien despues una macrotask. Esto puede repetirse varias veces en un mismo "tick".
• Consecuencia practica: Promise.then se ejecuta antes que setTimeout(..., 0).
• Modelo mental: "Pila vacia -> microtasks -> una macrotask -> repetir". Si la pila nunca se vacia, nada encola.

javascript
Copiar
1console.log("Inicio");
2setTimeout(() => console.log("Timeout"), 0);
3Promise.resolve().then(() => console.log("Promesa"));
4console.log("Fin");
5// Resultado: Inicio, Fin, Promesa, Timeout

javascript
Copiar
1// Microtask queue con múltiples then
2Promise.resolve()
3  .then(() => console.log("Micro 1"))
4  .then(() => console.log("Micro 2"));
5
6setTimeout(() => console.log("Macro"), 0);

javascript
Copiar
1// Bloqueo del hilo por tarea sincrona larga
2console.log("Antes");
3const inicio = Date.now();
4while (Date.now() - inicio < 2000) {} // bloquea 2s
5console.log("Despues");

javascript
Copiar
1// Ejemplo minimo del "tick"
2console.log("A");
3Promise.resolve().then(() => console.log("B"));
4setTimeout(() => console.log("C"), 0);
5console.log("D");
6// A, D, B, C

Callbacks

• Qué son: Funciones que se pasan como argumento para ejecutarse luego.
• Casos de uso: Eventos, temporizadores, peticiones simuladas y procesamiento en secuencia.
• Firma comun: En Node es tipico el estilo error-first: (err, data) => {}.
• Contrato: Un callback puede llamarse una sola vez; si se llama multiples veces, hay bugs sutiles.

javascript
Copiar
1function cargarDatos(callback) {
2  setTimeout(() => {
3    callback({ nombre: "Juan", edad: 30 });
4  }, 1000);
5}

javascript
Copiar
1// Callback estilo error-first (Node.js)
2function leerArchivoSimulado(ok, fail) {
3  const exito = Math.random() > 0.2;
4  setTimeout(() => {
5    if (exito) return ok("contenido");
6    return fail(new Error("No se pudo leer"));
7  }, 500);
8}

Callback Hell

• Anidamientos profundos que dificultan lectura, mantenimiento y manejo de errores.
• Motivación para usar promesas y async/await.
• Señal de alarma: callbacks que dependen de resultados anteriores y multiples niveles de indentacion.

javascript
Copiar
1// Ejemplo de callback hell
2login(user, (u) => {
3  cargarPerfil(u.id, (perfil) => {
4    cargarPosts(perfil.id, (posts) => {
5      render(posts);
6    }, onError);
7  }, onError);
8}, onError);