JavaScript visualizado: Event Loop

¿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.

las funciones se envían a la pila de llamadas cuando se invocan y desaparecen cuando devuelven un valor

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!

setTimeOut es proporcionado por el navegador, la web API se encarga de callback que le pasamos.

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).

Cuando el timer ha terminado (1000 ms en este caso), el callback se pasa a la cola de callback

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.

El event Loop mira la cola de callback y de callstack. Si el callstack está vacío, pone el primer elemento en la cola

El callback es añadido al callstack es invocada. Una vez el valor es retornado, se saca de la pila del stack.

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:

Invocamos bar. bar devuelve una función deSetTimeOut
El callback que pasamos a setTimeOut se agrega a la web API, la función setTimeOut y la barra se eliminan del callstack.
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
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.
El callback imprime Second