Callbacks y callback hell
Comprenda la asincronía basada en callbacks, identifique el problema de anidamiento conocido como callback hell y descubra por qué se introdujeron las Promises para resolverlo.
Callbacks y callback hell es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué son los callbacks?
Un callback es una función que se pasa como argumento a otra función para invocarla más adelante, cuando se completa alguna operación. Los callbacks son el patrón asíncrono original de JavaScript; son anteriores a las Promises.
// Synchronous callback:
[1, 2, 3].forEach(function(n) {
console.log(n);
});
// Async callback:
setTimeout(function() {
console.log('1 second later');
}, 1000);Callbacks de Node.js con el error en primer lugar
Node.js estandarizó una convención: los callbacks reciben un error como primer argumento y el resultado como segundo. Si err es null/undefined, la operación se realizó correctamente.
fs.readFile('data.json', 'utf8', function(err, data) {
if (err) {
console.error('Failed to read file:', err);
return;
}
console.log('File contents:', data);
});Pasos asíncronos con callbacks
Cuando una operación asíncrona depende del resultado de otra, se anidan los callbacks. Tres pasos secuenciales ya empiezan a resultar difíciles de leer.
getUser(userId, function(err, user) {
if (err) return handleError(err);
getOrders(user.id, function(err, orders) {
if (err) return handleError(err);
getInvoice(orders[0].id, function(err, invoice) {
if (err) return handleError(err);
// Finally use invoice
renderInvoice(invoice);
});
});
});Callback hell: la pirámide de la fatalidad
El anidamiento profundo se denomina callback hell o pyramid of doom. Problemas: el código se desplaza hacia la derecha con cada nivel, el manejo de errores es repetitivo, el flujo resulta difícil de seguir y la refactorización es complicada.
Los problemas de callback hell
1) El manejo de errores requiere un if(err) explícito en cada nivel. 2) La depuración es difícil: los seguimientos de pila no muestran la cadena lógica. 3) El código es difícil de leer al estar organizado en capas horizontales. 4) Es fácil pasar por alto errores accidentalmente.
Mitigación: funciones con nombre
Extraiga los callbacks anidados en funciones con nombre y de nivel superior. Esto aplana el anidamiento y permite probar cada paso de forma aislada, pero no resuelve el problema fundamental de coordinación.
function onInvoice(err, invoice) {
if (err) return handleError(err);
renderInvoice(invoice);
}
function onOrders(err, orders) {
if (err) return handleError(err);
getInvoice(orders[0].id, onInvoice);
}
function onUser(err, user) {
if (err) return handleError(err);
getOrders(user.id, onOrders);
}
getUser(userId, onUser);Bibliotecas de control de flujo (históricas)
Bibliotecas como async.js proporcionaban utilidades (async.waterfall, async.parallel) para gestionar flujos basados en callbacks. Eran la tecnología más avanzada antes de que llegaran las Promises en ES2015.
Por qué los callbacks no van a desaparecer
Los callbacks siguen apareciendo en todas partes: los listeners de eventos, los métodos de arrays, setTimeout y las APIs de streams utilizan callbacks. La clave es que, para la secuenciación asíncrona, las Promises y async/await son superiores. Los callbacks siguen siendo adecuados para eventos simples de una sola ocurrencia.
De callback a Promise: promisificar
util.promisify() de Node.js envuelve funciones de callback con el error en primer lugar y las convierte en versiones que devuelven una Promise. Esto permite conectar APIs heredadas con código moderno basado en async/await.
const { promisify } = require('util');
const readFile = promisify(require('fs').readFile);
async function readConfig() {
const data = await readFile('config.json', 'utf8');
return JSON.parse(data);
}Cuándo los callbacks siguen siendo la herramienta adecuada
Los listeners de eventos (addEventListener) esperan callbacks, y eso está bien: se activan varias veces. Los controladores de datos de streams también esperan callbacks. Las Promises representan resultados asíncronos que ocurren una sola vez; los callbacks son suscripciones a varios eventos.
El camino a seguir: Promises y async/await
Las Promises, introducidas en ES2015, y async/await, introducido en ES2017, resolvieron el callback hell. El código moderno de JavaScript casi siempre utiliza async/await para operaciones asíncronas secuenciales. Comprender los callbacks sigue siendo importante para leer código antiguo y el funcionamiento interno de las bibliotecas.
Comprobación rápida
¿Cuál es el problema principal que describe el término «callback hell»?
Resumen: callbacks
Los callbacks son funciones que se pasan a otras funciones para invocarlas más adelante. Son el patrón asíncrono original. Los callbacks con el error en primer lugar (err, result) son una convención de Node.js. El anidamiento profundo crea callback hell. Extraiga funciones con nombre para aplanarlo. Utilice Promises y async/await para flujos asíncronos secuenciales. Los callbacks siguen siendo adecuados para listeners de eventos y streams.
Preguntas frecuentes
¿La lección «Callbacks y callback hell» es gratis?
Sí — el texto completo de «Callbacks y callback hell» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Callbacks y callback hell»?
Comprenda la asincronía basada en callbacks, identifique el problema de anidamiento conocido como callback hell y descubra por qué se introdujeron las Promises para resolverlo. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Callbacks y callback hell»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El event loop: call stack queue microtasks
- Callbacks y callback hell
- Promises: then catch finally Promise.all
- async/await y gestión de errores