Introducción

En el mundo de Javascript normalmente nos encontraremos con algunas cosas que no entenderemos bien y que, de no hacerlo, las cosas más avanzadas nos serán más difíciles de entender. Por eso en este post explicaré un poco 3 cosas básicas que debemos saber al programar en este fabuloso lenguaje.

Una analogía a los callbacks y el código asíncrono es la siguiente:

Imaginemos que fuimos a la casa de un amigo y dejamos las llaves de nuestra habitación en su casa. Así que lo llamamos por teléfono y le decimos que por favor busque la llave. Pero en lugar de esperar a que las encuentre, terminamos la llamada y le pedimos que cuando las encuentre nos llame. Así, mientras él busca, nosotros podemos dedicarnos a otras cosas.

Después de unos minutos u horas, el amigo nos llamará y nos dirá que las encontró. Pero en ese tiempo transcurrido nosotros habremos hecho otras cosas productivas, en lugar de quedarnos pegados al teléfono mientras él buscaba.

El callback en este caso sería cuando nuestro amigo nos llama de vuelta con los datos de la búsqueda de las llaves. El código asíncrono es que no nos quedamos quietos esperando a que terminara, sino que hicimos otras cosas y esperamos su llamada.

Funciones

Las funciones en Javascript se comportan como las funciones en todos los lenguajes de programación. Reciben argumentos, procesan y regresan lo procesado. A veces no reciben argumentos, y a veces no regresan nada.

Por ejemplo, aquí tenemos una función que suma dos números:

function sumar(numero, otroNumero){
  return numero + otroNumero;
}

Funciones anónimas

Las funciones anónimas, como su nombre lo indica, no tienen nombre. Y normalmente son usadas sólo una vez en nuestro código. Por ejemplo, al hacer una petición AJAX usando jQuery podemos usar algo así:

$.get("archivo.php", function(respuesta){
  //Aquí manejar la respuesta
});

Fijémonos en la parte en donde dice function(respuesta). La función no tiene nombre, pero ahí está.  Sólo indica que recibirá la respuesta como argumento. No le pusimos nombre porque no es necesario, ya que sólo será usada una vez para manejar esta respuesta específica.

La función sumarNumeros puede que la utilicemos en otra parte de nuestro programa, así que le pusimos nombre para llamarla cuando queramos, las veces que sean necesarias; pero para cosas específicas podemos usar una anónima.

Aunque si queremos, podemos definir una función con nombre, así:

$.get("archivo.php", manejarRespuesta);
 
function manejarRespuesta(respuesta){
  //Aquí manejar la respuesta
}

La desventaja es que, si hacemos muchas peticiones no vamos a estar definiendo muchas funciones para cada respuesta, ya que sería engorroso. Por eso se usa una función anónima, ya que sólo se llamará una vez.

Código asíncrono

En Javascript, tanto del lado del cliente como del servidor, se usa el código asíncrono. ¿Por qué?

Bueno, veamos otra vez la petición AJAX de arriba:

$.get("archivo.php", function(respuesta){
  //Aquí manejar la respuesta
});

Estamos llamando a archivo.php. Lo normal sería poner algo así:

var misDatos = $.get("archivo.php", function(respuesta){
  return respuesta;
});

Lo que haría ese código sería pedirle al servidor el archivo y esperar a que regresara. Una vez que regresara, le asignamos eso a la variable.

Pues eso no es posible, aunque tal vez muchos quisiéramos que fuera así. La razón por la que no es posible es porque mientras se espera la respuesta del servidor, la interfaz quedará pausada o congelada. Es decir, se hace la petición, y el usuario no podrá hacer click en ningún botón, ni escribir en un input; nada. Cuando el servidor responda la petición AJAX, todo se descongelará. Pero no sabemos a ciencia cierta a qué hora el servidor responderá.

Pueden pasar muchas cosas; por ejemplo, que el servidor esté ocupado atendiendo a otros clientes. O que se caiga, o cosas así. Nunca debemos confiar en que el servidor responderá al instante, por más rápido que éste sea.

Así que mejor lo hacemos asíncrono. Le pedimos el archivo al servidor, y le decimos a Javascript: “Oye, cuando el servidor responda, avísame”.

Mientras el servidor responde, Javascript procesa otro código, escucha clicks de botones, y hace cualquier operación.

Si el servidor responde después de 1 minuto esto no importa, ya que la interfaz no se quedó congelada.

Callbacks

Los callbacks son funciones que se ejecutan cuando un proceso asíncrono ha terminado (en error o en éxito, pero terminado).

Nuevamente veamos la función AJAX de arriba:

$.get("archivo.php", function(respuesta){
  //Aquí manejar la respuesta
});

Podemos ver que definimos una función anónima. Pues bien, lo que hacemos es decirle a Javascript que nos llame de vuelta cuando reciba la respuesta del servidor. ¿A quién llamará? pues a la función anónima que definimos.

Dentro de la función ya podemos trabajar con los datos. No sabemos a ciencia cierta cuándo será llamada dicha función, pero sí sabemos programarla para que procese los datos una vez que éstos sean devueltos.

Conclusión

Las funciones asíncronas no sólo son usadas con peticiones AJAX. Por ejemplo, también son usadas en Javascript del lado del servidor. Algunos ejemplos son:

• Leer archivos: le decimos a Javascript que lea un fichero del disco duro, y que nos llame cuando haya terminado. Mientras tanto, podemos atender otras peticiones de los clientes.
• Interactuar con bases de datos: guardar o manipular datos y esperar a que nos llamen de vuelta en lugar de estar esperando. Mientras esperamos la llamada, podemos atender otras cosas

Por cierto, cabe mencionar que los callbacks ya están en desuso y están siendo remplazados por promesas o por async y await, pero eso es otra historia. Además, si entendemos el código asíncrono no nos costará entender las demás cosas.