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:

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í:

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í:

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:

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

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:

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.

Estoy interesado en trabajar contigo de manera remota para llevar tu idea a la realidad, formar parte de tu equipo de desarrolladores, ayudarte con tu tarea, dar asesorías y todo lo relacionado con tecnología y programación. Contáctame para más información
No te vayas sin seguirme en Twitter, Facebook y GitHub
Si tienes dudas déjalas en un comentario, pero asegúrate de seguirme antes como agradecimiento (no te cuesta nada y me ayudas mucho)

Categorías: javascript

parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB. Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron. Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scripts La plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C. Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

6 Comments

API de binbox.io en Javascript - Parzibyte's blog - El blog de Luis Cabrera · enero 26, 2018 a las 7:21 pm

[…] no entiendes mucho sobre las funciones anónimas o los callbacks, aquí te dejo una breve introducción a […]

Acceder al portapapeles con JavaScript - Parzibyte's blog · agosto 24, 2018 a las 10:54 am

[…] En este caso será asíncrono (si no sabes qué es asíncrono recomiendo leer: código asíncrono, síncrono y callbacks en JS) […]

Lazy loading de imágenes con Intersection Observer API - Parzibyte's blog · septiembre 5, 2018 a las 12:24 pm

[…] Ahora comprobamos si el navegador tiene soporte para observar la intersección. Y en caso de que sí, creamos un observador y por cada entrada que tenga añadimos un callback. […]

Web Workers en JavaScript: ejemplos y explicación - Parzibyte's blog · septiembre 7, 2018 a las 5:37 pm

[…] tan extendido) API que nos permite ejecutar procesos en segundo plano. Recordemos por ejemplo las llamadas asíncronas, se hacen para no congelar la interfaz del […]

Leer el contenido de un archivo con Node.JS, fs y readline - Parzibyte's blog · diciembre 27, 2018 a las 7:31 am

[…] readFile de fs. Este método puede recibir 3 argumentos: la ruta del archivo, la codificación y el callback; esto último lo ponemos en una función […]

setTimeout y setInterval en JavaScript, un acercamiento a los hilos - Parzibyte's blog · marzo 24, 2019 a las 6:01 am

[…] es por naturaleza asíncrono. Tiene callbacks, promesas o await. Las peticiones de AJAX las hace de manera asíncrona y también el […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: