JavaScript visualizado: Event Loop
Published: 2021-11-10 19:52:15

### ¿Qué es Event Loop y por qué debería importarte?

JavaScript es de un solo subproceso: solo se puede ejecutar una tarea a la vez. Ahora imagina que estás ejecutando una tarea que tarda en terminar 30 segundos… Esperamos 30 segundos antes de que suceda cualquier otra cosa, ¿no es de locos?.

Por suerte el navegador nos brinda algunas funciones que el motor JS en si no nos da: Una Web API. Esto incluye la API DOM, setTimeout, solicitudes HTTP, etc. Esto puede ayudarte a crear un comportamiento asincrónico y sin bloqueos.

Cuando invocamos una función se añade a algo llamado “callstack” (pila de llamadas). Es parte del motor JS, no forma parte del navegador.

Es una pila, por lo que es el primero en entrar y el último en salir. (como un montón de tortitas, piénsalo así). Cuando una función devuelve un valor, sale de la pila.
>  1. las funciones se envían a la pila de llamadas cuando se invocan y desaparecen cuando devuelven un valor

![callstack](https://cdn-images-1.medium.com/max/2000/1*BQ0QuqGwpcZCGVnbshr_ng.gif)

La función de respuesta devuelve una función setTimeOut. 
Este nos lo proporciona la **web API**: nos permite retrasar las tareas sin bloquear el hilo principal.

La función **callback** que pasamos a la función setTimeOut,
la función de flecha ()=> { return 'Hey' } se añade a la **web API**.
Mientras tanto, la función setTimeOut y la de respuesta se eliminan del **callstack. **¡Ambas han devuelto sus valores!
>  2. setTimeOut es proporcionado por el navegador,
la **web API** se encarga de **callback** que le pasamos.

![callstack](https://cdn-images-1.medium.com/max/2000/1*U-jSWrn_vKdjdCpz0JaIhQ.gif)

En **web API**, un temporizador se ejecutará durante tanto tiempo como el segundo argumento que le pasemos (1000ms). El **callback** no se añade inmediatamente a la pila de llamadas, sino que se pasa a algo llamado cola (queue).
>  3. Cuando el timer ha terminado (1000 ms en este caso),
el **callback** se pasa a la cola de **callback**

![callstack](https://cdn-images-1.medium.com/max/2000/1*uxMxZ6y6lzLCVP4bTiYEow.gif)

Esto puede ser una parte confusa: No significa que la función de callback se añade al **callstack** (por lo tanto, devuelve un valor) después de 1000ms, simplemente se añade a la cola después de 1000ms. Pero es una cola, ¡la función tiene que esperar su turno!

Ahora esta es la parte que estábamos esperando… Es hora de que event loop haga su única tarea: **¡conectar la cola con el callstack!** Si el **callstack** está ***vacío***, si todas las funciones invocadas anteriormente han devuelto sus valores y se han eliminado del stack, el primer elemento en la cola se añade al **callstack**. En este caso, no se invocó ninguna otra función, lo que significa que el **callstack** estaba vacío cuando el tiempo de la función de callback era el primer elemento de la cola.
>  4. El event Loop mira la cola de callback y de callstack.
Si el callstack está ***vacío***, pone el primer elemento en la cola

![callstack](https://cdn-images-1.medium.com/max/2000/1*flj3SyshFtfLiuVzVw3ypQ.gif)
>  5. El callback es añadido al callstack es invocada.
Una vez el valor es retornado, se saca de la pila del stack.

![callstack](https://cdn-images-1.medium.com/max/2000/1*VdOD_VVf9WQoUFnYnI9KvQ.gif)

Leer esto es divertido, pero solo te sentirás cómodo con esto si trabajas con ello una y otra vez. Intenta averiguar qué se registra en la consola si ejecutamos lo siguiente:

    const foo = () => console.log("First");
    const bar = () => setTimeout(() => console.log("Second"), 500);
    const baz = () => console.log("Third");

    bar();
    foo();
    baz();

Echemos un vistazo rápido a lo que sucede cuando ejecutamos este código en un navegador:

 1. Invocamos bar. bar devuelve una función deSetTimeOut

 2. El callback que pasamos a setTimeOut se agrega a la **web API**, la función setTimeOut y la barra se eliminan del callstack.

 3. El timer se ejecuta, mientras tanto foo es invocada y imprime **First**. foo devuelve (undefined), baz es invocada y el callback es añadido a la cola

 4. baz imprime **Third**. El event loop ve que el callstack está ***vacío*** después de que baz se retorne, después de lo cual el callback se agrega a la pila de llamadas.

 5. El callback imprime **Second**

Link a la versión original del artículo: ✨♻️ [JavaScript Visualized: Event Loop.](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif) *Thank you [Lydia Hallie](undefined), for making me take off 🚀*.