Los callbacks

Un callback en JavaScript es simplemente una función que se pasa como argumento a otra función, y que luego se ejecuta en algún momento dentro de esa función.

1. Concepto básico: #

• Cuando defines una función y le pasas otra función como parámetro, esa función que pasas es el callback.
• La función que recibe al callback puede ejecutarlo cuando lo necesite, lo que te permite controlar el flujo del programa de manera flexible.

2. Por qué se usan? #

Los callbacks son muy útiles en situaciones donde una operación lleva tiempo, como leer un archivo, hacer una petición a un servidor, o esperar a que el usuario haga clic en algo. En estos casos, JavaScript no espera que termine la operación, sino que sigue ejecutando el código y, cuando la operación se completa, llama al callback.

3. Ejemplo sencillo: #

Imagina que tienes una función que saluda, pero quieres que el saludo cambie según la situación. Pasas diferentes funciones como callbacks para modificar el saludo:

 
1function saludar(nombre, callback) {
2    console.log("Hola " + nombre);
3    callback(); // aquí se ejecuta el callback
4}
5
6function despedir() {
7    console.log("Adiós");
8}
9
10// Llamamos a la función "saludar" con "despedir" como callback
11saludar("Carlos", despedir);
Salida de consola
Hola Carlos
Adiós

En este ejemplo, despedir es un callback que se ejecuta después de que la función saludar termina de hacer su trabajo.

4. Callbacks y funciones asíncronas: #

Los callbacks se usan mucho cuando algo tarda en completarse, como leer datos de un servidor. Por ejemplo, en una operación asíncrona como setTimeout, el callback se ejecuta después de un tiempo.

 
1console.log("Antes del timeout");
2
3setTimeout(() => {
4    console.log("Esto ocurre después de 2 segundos");
5}, 2000); // El callback se ejecutará después de 2 segundos
6
7console.log("Después del timeout");
Salida de consola
Antes del timeout
Después del timeout
Esto ocurre después de 2 segundos

Aquí, setTimeout toma un callback (la función dentro de setTimeout) que se ejecutará después de 2 segundos, pero mientras tanto, el resto del código continúa ejecutándose.

5. Ventajas de los callbacks: #

1. Control sobre el flujo del programa: Puedes definir qué pasa después de que algo ocurra, como cuando se completa una operación.
2. Permiten manejar tareas asíncronas: Son esenciales para manejar operaciones que no suceden instantáneamente, como acceder a datos externos o trabajar con eventos de usuario.

6. Callbacks anidados (callback hell): #

A veces, los callbacks pueden volverse complicados si los anidas demasiado. Por ejemplo, si tienes que hacer una tarea después de otra, terminas con código que parece una "escalera" o "piramide", esto es conocido como callback hell.

1setTimeout(() => {
2    console.log("Primero");
3    setTimeout(() => {
4        console.log("Segundo");
5        setTimeout(() => {
6            console.log("Tercero");
7        }, 1000);
8    }, 1000);
9}, 1000);

Este código funciona, pero es difícil de leer y mantener. Para evitar esto, hoy en día se usan promesas o async/await como alternativas, que hacen el código más legible.