Como funciona la asincronía en Javascript

Ejemplo de síncrono y asíncrono

Cuando comenzamos a aprender JavaScript, muchas veces nos resulta complejo entender el concepto de Asincronía. Pues bien, un código síncrono es como la fila que se forma al comprar el pan en la tienda de tu barrio, nos ponemos uno detrás de otro y nos atienden según vamos llegando. El concepto de asíncrono podría parecerse más a un gran supermercado en el que existe una fila única inicial, que se divide en varias filas para el pago cuando una caja queda libre, los compradores salen del supermercado no en orden en que entraron en la fila, sino salen en función del tiempo que han tardado en pagar la compra.

Asincronía, mas simple de lo que parece

Para poder entender este concepto, JavaScript incorpora tres partes:

Call Stack

La pila pila de llamadas (Call Stack en inglés) es una estructura tipo LIFO (Último en entrar, Primero en Salir) en que la van entrando funciones y se va ejecutando.

Web Api

Pero claro, que ocurre si en el Call Stack entra un evento onClick y no se ejecuta nunca, al no hacer clic sobre dicho elemento, o un setTimeout de 100000 segundos o una llamada a una Api que tarda mucho, ¿se para el programa?. No, esta es la verdadera magia de JavaScript, estas funciones (timers de JavaScript, eventos generados por clics, o HTTP request) las gestiona el Web Api, siguiendo la pila de llamadas con la siguiente instrucciones.

Callback Queue

Que pasa cuando se da el clic del evento, acaba el setInterval o responde el servidor a una petición HTTP, pues en ese momento la función o respuesta de estos eventos se pasa a la cola de tareas (Queue) a la espera de entrar en la pila de llamadas. Esta cola es una estructura FIFO (Primero en entrar, primero en salir) y es el Event Loop el que se encarga de ir añadiéndola al Call Stack para su ejecución.

Resumiendo

En resumen, las funciones entran en el Call Stack, y se ejecutan, si una de ellas espera un evento, por ejemplo un clic, la pasamos a Web Api para no parar el Call Stack y cuando tenemos la respuesta se pasa al Callback Queue, que la insertará en el Call Stack para que se ejecute dicha respuesta.

Para entenderlo mejor podemos utilizar la herramienta web loupe que nos muestra como se van ejecutando las ordenes en JavaScript. Nos permite pausar la ejecución, cambiar los tiempos para que la ejecución sea mas lenta y podamos seguir paso a paso lo que ocurre.