Callback
¿Qué es un Callback?
Un callback es una función que se pasa como argumento a otra función y se ejecuta en un momento específico, generalmente después de que se complete una operación. Es una forma de decirle a JavaScript: “cuando termines de hacer esto, ejecuta esta otra función”.
¿Para qué sirve un Callback?
Los callbacks son fundamentales en JavaScript para manejar operaciones asíncronas. Permiten que una función:
- Ejecute código después de completar una tarea (como una petición HTTP o leer un archivo).
- Responda a eventos del usuario (clics, cambios en formularios, etc.).
- Controle el flujo de ejecución sin bloquear el hilo principal.
- Implemente patrones de programación funcional y reutilización de código.
¿Cómo funciona?
Imagina un callback como pedirle a alguien que te llame cuando termine algo. Por ejemplo, le dices a un amigo: “cuando llegues a casa, llámame”. El “llamarte” es el callback que se ejecuta cuando se completa la condición “llegar a casa”.
Ejemplo: Callback básico
Un ejemplo simple de callback con setTimeout:
function saludar() {
console.log("¡Hola! Han pasado 2 segundos");
}
setTimeout(saludar, 2000); // saludar es el callback
console.log("Este mensaje aparece primero");
En este ejemplo, saludar es el callback que se ejecuta después de 2 segundos, mientras que el resto del código continúa ejecutándose.
Ejemplo: Callback con parámetros
function procesarDatos(datos, callback) {
console.log("Procesando datos...");
const resultado = datos.map(x => x * 2);
callback(resultado);
}
function mostrarResultado(resultado) {
console.log("Resultado:", resultado);
}
procesarDatos([1, 2, 3, 4], mostrarResultado);
// Salida: "Procesando datos..." luego "Resultado: [2, 4, 6, 8]"
Tipos de Callbacks
- Callbacks síncronos: Se ejecutan inmediatamente (como
map,filter,forEach). - Callbacks asíncronos: Se ejecutan después de una operación asíncrona (
setTimeout,fetch, eventos). - Callbacks de error: Manejan errores en operaciones asíncronas.
- Callbacks anónimos: Funciones definidas directamente en el argumento.
¿Dónde te encuentras con Callbacks?
- En eventos del DOM:
button.addEventListener('click', callback). - En operaciones asíncronas:
setTimeout,setInterval. - En métodos de arrays:
array.map(callback),array.filter(callback). - En APIs antiguas que no usan Promises.
- En bibliotecas como jQuery:
$.get(url, callback).
Problema: Callback Hell
Los callbacks pueden crear código difícil de leer cuando se anidan:
getData(function(a) {
getMoreData(a, function(b) {
getEvenMoreData(b, function(c) {
// Callback hell!
});
});
});
Conclusión
Un callback es un patrón fundamental en JavaScript que permite manejar operaciones asíncronas y eventos. Aunque han sido en gran parte reemplazados por Promises y async/await, entender callbacks es esencial para comprender el comportamiento asíncrono y trabajar con código legacy.