En este artículo exploraremos la ruta que sigue JavScript para leer y procesar nuestro código, cuando programamos debemos muchas veces leer nuestro propio código para entender que hace y como mejorarlo, un factor a considerar son las singularidades que tiene nuestro lenguaje al momento de hacer tareas, buscar o enviar información, etc.

Por definición:

Asincronismo hace referencia al suceso que no tiene lugar en total correspondencia temporal con otro suceso

Esto se traduce en que nuestro código es leído parte por parte a medida que sea requerido, pudiendo ejecutar fragmentos en diversas partes del mismo, esto es especialmente útil cuando debemos priorizar un extracto de código que esté debajo de otro, dejando este para ejecutarse más tarde.

Para entenderlo mejor, comencemos con 2 conceptos claves:

🎢 Concurrencia vs Paralelismo

Partamos primero por explicar estos conceptos

Usemos un ejemplo: las peticiones se resuelven como una fila de un supermercado, la caja atenderá a los clientes por orden, cada uno puede llevar más o menos productos, pero solo puede atender uno por vez, dejando al resto en espera, esto es Concurrencia.

Retomando el ejemplo anterior, imaginemos que abrimos una nueva caja, ahora tenemos 2 cajas atendiendo a los clientes al mismo tiempo, esto es Paralelismo.

Concurrencia: cuando dos o mas tareas progresan simultáneamente.
Paralelismo: cuando dos o mas tareas se ejecutan, literalmente, a la vez, en el mismo instante de tiempo.

✍ Aprende  más sobre este tema en Concurrencia vs Paralelismo

🛑 Bloqueante vs No Bloqueante

Cuando un lenguaje procesa muchas peticiones, debe de hacerlo en el menor tiempo posible, para ellos tenemos 2 alternativas:

Bloqueante: Esta propiedad nos dice que mientras se haga una tarea, el programa no devolverá el control hasta que sea completada, es decir, se comportará de manera concurrente, esto hace que cada petición deba ser respondida antes de ejecutar la siguiente.

No Bloqueante: A diferencia del bloqueante, aquí devolveremos una respuesta inmediatamente con independencia del resultado, pudiendo ser este datos o un error, aquí podremos seguir ejecutando una serie de tareas sin generar un cuello de botella porque una petición no haya sido respondida.

🟨 JavaScript es...

Un lenguaje asíncrono de concurrencia y no bloqueante, esto porque nuestro espacio de ejecución solo puede responder a 1 tarea a la vez pero pudiendo hacerlas sin importar si la respuesta es dato o error con tal de no obstruir el programa

🎡 Event Loop

La traducción al español nos da una pista de que es: "ciclo de eventos", es un patrón de diseño que gestiona los mensajes o eventos en un programa, Estos mensajes pueden ser enviados por usuarios o por una WebApi y la forma de resolverlas será retornando un valor, es decir, un dato. El Event Loop se compone de varias partes:

1) Pila (Stack)

Formalmente llamaremos a cada entrada u operación en la Pila como un frame, este encapsula información como el contexto y las variables locales de una función.

Cuando llamamos una o más funciones para completar una tarea, estas pasan a la pila, donde serán completadas una a una, tras terminar una tarea, esta sale de la pila, veamos un ejemplo con código:

function f(b){
  var a = 12;
  return a+b+35;
}

function g(x){
  var m = 3;
  return f(m*x);
}

g(21);

Aquí la tarea será llamar a g, para ello, el programa llama a la función cuyo parámetro es g, pero para que esta pueda completarse, requiere la función de parámetro f, de esta forma se define el orden de ejecución, de la última instancia hasta la primera, así se realiza la función f, esta sale de la pila de ejecución, luego ejecuta la función g y manda el resultado.
2) Montículo (Heap)
Es el espacio de memoria donde se guardan los datos (objetos) que se procesan de la pila, comúnmente sin estructura u orden, Es compartida por todo el programa y además, se encarga de liberar aquello que no se esté usando.
3) Cola (Queue)
Es el espacio donde están los mensajes por ser procesados, al JavaScript ser un lenguaje de concurrencia, mientras en la pila se resolverá una petición, la cola guardará el mensaje a ser procesado, cada mensaje se asocia con una función y procesar un mensaje consiste en llamar a la función asociada al mensaje, el mensaje procesado esta listo cuando la pila esté vacía.
😎 Esto continuará...
Esta es la primera parte del asincronismo de JavaScript, con esto entendemos como se ejecuta nuestro código y los conceptos básicos detrás de ello, si te interesa ejemplos empleando código más complejo, te recomiendo el curso Mastering en React.
Sin más, mantente atento a las siguientes publicaciones y pásate por Codmind, hasta pronto!!!
Referencias:

https://developer.mozilla.org/es/docs/Web/JavaScript/EventLoop#loop_de_eventos

https://medium.com/@ubykuo/event-loop-la-naturaleza-asincrónica-de-javascript-78d0a9a3e03d

https://https-bedu-org.gitbook.io/javascript-desde-cero/parte-6/asincronismo/que-es-asincronismo

https://lemoncode.net/lemoncode-blog/2018/1/29/javascript-asincrono

http://panamahitek.com/introduccion-al-paradigma-de-la-programacion-asincrona/