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.


Usamos cookies para mejorar tu experiencia. ¿Aceptas las cookies de análisis?