El event loop es la forma que tiene JavaScript de manejar el asincronismo, en si, es una pequeña parte de todo el proceso que se realiza cuando usamos alguna función asíncrona, para comprender mejor, mostraremos un diagrama de como funcionan estas y explicaremos sus partes:
Diagrama del Event Loop
Este es el motor sobre el que corre JavaScript, este ejecuta el Código, como visto en cursos anteriores ( Curso de JavaScript Engine (V8) y el Navegador) la forma en la que corre JavaScript se basa en dos estructura de datos principales:
El Heap: Espacio de memoria donde se almacenan los objetos. (no es tan relevante para esta explicación)
El Call Stack: Estructura de la forma LIFO que ejecuta nuestras instrucciones, añadiendo las distintas funciones a ejecutar una sobre otra, terminando primero las ultimas añadidas.
Para entender las Web Apis primero debemos recordar:
¿Que es una API?:
Las Interfaces de Programación de Aplicaciones (APIs por sus siglas en inglés) son construcciones disponibles en los lenguajes de programación que permiten a los desarrolladores crear funcionalidades complejas de una manera simple. Estas abstraen el código más complejo para proveer una sintaxis más fácil de usar en su lugar.
Como ejemplo, piensa en el suministro de electricidad de tu casa, apartamento, o cualquier otro edificio. Si quieres usar un electrodoméstico, simplemente lo conectas en un enchufe y funciona. No intentas conectarlo directamente a la fuente de alimentación — hacerlo sería muy ineficiente y, si no eres electricista, difícil y peligroso.
Web Apis: Ahora, habiendo recordado esto es fácil indicar que las web api son la forma que tenemos, como programadores, de conectarnos con funcionalidades del navegador, este a su ves nos permite conectarnos a funcionalidades y información del hardware. estas son ejecutadas por el navegador, fuera del runtime de JavaScript
En JavaScript, las funciones que nos permiten realizar el asincronismo son realmente web Apis, cuando al call Stack llega una función que forma parte de una web api, esta es delegada al navegador, para el call stack esta ya fue “ejecutada” y la saca del stack.
Una vez la función se encuentra en el navegador, esta es ejecutada y enviada al event loop.
Event Queue: Este es una estructura del tipo FIFO que toma los resultados de las funciones que fueron ejecutadas por el navegador y las mantiene hasta que el event loop las envié al call stack.
Event Loop: Esta es una de las partes mas importantes para completar el ciclo de una función asíncrona, el event loop tiene solo una misión, este ve tanto el call stack como el event queue, en el momento en que el call stack esta vació, este enviara las respuestas de las funciones ejecutadas por el navegador a través de las web api al call stack para ser ejecutadas.
