Tutorial JavaScript: Callbacks

El concepto de "callback" es un pilar fundamental en JavaScript, y para entenderlo adecuadamente, se requiere cierto nivel de familiaridad con las funciones en este lenguaje.

Un callback es una función que se pasa como argumento a otra función. Esta última puede ejecutar la función callback en cualquier momento, es decir, "llamar de vuelta" a esta función cuando sea necesario. La principal ventaja de los callbacks es que permiten que las funciones se ejecuten de forma asíncrona, sin bloquear la ejecución del resto del código.

Un ejemplo básico de un callback en JavaScript se podría ver de la siguiente manera:

function saludo(nombre) {
  alert('Hola, ' + nombre);
}

function procesarUsuario(callback) {
  let nombre = prompt('Por favor, introduce tu nombre.');
  callback(nombre);
}

procesarUsuario(saludo);

En este ejemplo, la función procesarUsuario toma una función callback como argumento. Dentro de procesarUsuario, el usuario es solicitado a introducir su nombre, y luego se llama a la función callback con ese nombre como argumento. Cuando procesarUsuario se llama con saludo como su argumento, se genera una alerta de saludo con el nombre del usuario.

Los callbacks son especialmente útiles en operaciones asíncronas, como las solicitudes de red, las lecturas de archivos o las operaciones de temporizador. Por ejemplo, aquí se muestra cómo se puede usar un callback con la función setTimeout de JavaScript, que espera un número determinado de milisegundos antes de ejecutar una función:

function terminado() {
  console.log('¡Operación terminada!');
}

console.log('Iniciando operación...');

setTimeout(terminado, 3000);

En este caso, la función terminado se pasa como un callback a setTimeout. Después de 3000 milisegundos (o 3 segundos), setTimeout "llama de vuelta" a la función terminado, y se imprime "¡Operación terminada!" en la consola.

Es importante notar que los callbacks pueden a veces conducir a lo que se conoce como "infierno de callbacks" ("callback hell") si se anidan múltiples operaciones asíncronas, dificultado la lectura y el mantenimiento del código. Este problema se puede solucionar o mitigar utilizando promesas o la sintaxis async/await.

Ejemplos de uso

Callbacks en eventos

Un ejemplo común de callbacks en JavaScript es el manejo de eventos en la web. Los eventos son acciones del usuario o del navegador, como hacer clic en un elemento, presionar una tecla, cargar una página, etc. Un ejemplo de un callback en un evento de click:

let boton = document.querySelector('button');

boton.addEventListener('click', function() {
  console.log('El botón ha sido pulsado!');
});

En este código, addEventListener es un método que toma dos argumentos: una cadena que representa el tipo de evento para escuchar, y un callback para ejecutar cuando se dispara el evento. En este caso, el callback es una función que imprime un mensaje en la consola cuando el botón es pulsado.

Callbacks y la asincronía

Un aspecto importante de los callbacks es que permiten la asincronía. En otras palabras, permiten que el código se ejecute sin bloquear el resto del programa. Un ejemplo típico de esto es la realización de solicitudes de red. Aquí hay un ejemplo usando la función fetch, que realiza una solicitud HTTP y devuelve una Promesa:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

En este código, fetch se llama con una URL como argumento, y devuelve una Promesa. Se llama al método then de la Promesa, que acepta un callback para manejar la respuesta. En este caso, el primer callback convierte la respuesta a JSON, y el segundo imprime los datos en la consola. También hay un callback para manejar cualquier error que pueda ocurrir.

Estos son solo dos ejemplos de cómo se utilizan los callbacks en JavaScript. Son una herramienta increíblemente poderosa y versátil, y forman la base de muchas de las características asíncronas del lenguaje.