Cómo funciona el bucle de eventos en JavaScript
El bucle de eventos es uno de esos temas prohibidos de los que nadie quiere hablar debido a la complejidad de algunos de sus conceptos centrales. Pero en realidad, es uno de los conceptos más importantes para entender cómo funciona JavaScript bajo el capó, hoy vamos a encender una luz en medio de la noche, para ahuyentar el mal allá donde aceche, comprendiendo cómo el lenguaje de la web gestiona sus tareas.
Hay dos aspectos principales a considerar cuando el motor de JavaScript lee y ejecuta nuestro código:
- Necesitamos un lugar para almacenar y escribir información (variables, funciones, etc.)
- Necesitamos hacer un seguimiento de lo que ocurre con nuestro código línea por línea.
Javascript organiza las variables y las tareas utilizando cuatro conceptos, pila de llamadas, cola de eventos, cola programada y montón de memoria.
Call Stack
Una pila es una estructura de datos lineal que JavaScript utiliza para ordenar nuestras llamadas a funciones, dependiendo del ámbito de una determinada función (ámbito global, ámbito de bloque, ámbito de función). Almacena los elementos utilizando el método Last In, First Out (LIFO). Cada vez que se añade un nuevo elemento a una pila, se añade a la parte superior de la pila, y el elemento superior siempre se elimina primero de una pila.
Podemos imaginar una pila como una pila de platos, en la que se pone un plato sobre otro. Pero aquí está la cosa, no puedes coger el primer elemento que has añadido, sólo el último, aquí es cuando se aplica el concepto de Last In, First Out (LIFO).
De hecho, el nombre del sitio web Stack Overflow está inspirado en un problema muy malo que ocurre a menudo, y se llama Stack Overflow. Ocurre cuando llamamos a funciones anidadas unas dentro de otras, una y otra vez. Si seguimos añadiendo funciones a la pila sin quitarlas, tendremos un desbordamiento de pila. Podemos invocar este demonio muy fácilmente usando la recursividad.
El montón de memoria
El montón de memoria es sólo un área donde la memoria se asigna o desasigna sin ningún orden; cuando creamos una nueva variable, el montón de memoria va a crear una referencia para almacenar nuestra variable. Esto es opuesto a una pila donde la memoria es reasignada en base al último en entrar, primero en salir (LIFO).
Cola de eventos y cola programada
Una cola es una estructura de datos lineal en la que el orden es First in, first out (FIFO). El bucle de eventos tiene una cola programada y una cola de eventos, cada una de ellas juega un papel vital para que JavaScript parezca un lenguaje multihilo, cuando en realidad no lo es.
La cola de eventos es una cola especial, que mantiene un registro de todas las colas de funciones, que son necesarias para ser empujadas a la pila de llamadas. La cola de eventos es responsable de enviar nuevas funciones a la pista para su procesamiento. La estructura de datos de la cola es necesaria para mantener la secuencia correcta en la que todas las operaciones deben ser enviadas para su ejecución.
La cola programada tiene en su interior todas las tareas asíncronas que se ejecutarán en el futuro; de hecho, siempre que la pila de llamadas y la cola de eventos estén vacías, las tareas programadas se pasarán a la cola de eventos y luego a la pila de llamadas.
De hecho, cuando se trata de promesas en JavaScript, tenemos un concepto adicional que debemos revisar, la cola de microtareas. La cola de microtareas es una cola que tiene todas las promesas y va a tener prioridad sobre la cola programada.
Event Loop
El bucle de eventos es el protagonista de nuestro juego, tiene la responsabilidad de comprobar si hay una tarea pendiente de ser ejecutada, de hecho, está en el medio entre la pila de llamadas y la cola de eventos, asegurándose de que si hay una tarea tanto en la cola de eventos como en la cola de microtareas sea pasada a la pila de llamadas para ser ejecutada, antes mencionamos que la cola de microtareas tiene más prioridad que la cola programada, pues bien, vamos a explicar el proceso para entenderlo en un nivel más profundo.
Cuando hay tareas en la pila de llamadas, se van a ejecutar y por lo tanto las tareas ejecutadas serán eliminadas del call stack. Cuando el call stack está vacío, el bucle de eventos va a comprobar si hay alguna tarea en la cola programada, cola de microtareas y en la cola de eventos, si no hay una tarea en la cola de eventos, el bucle de eventos va a ver en la cola programada, si hay una tarea programada, el bucle de eventos pasará esa tarea a la cola de eventos y luego, va a ver si hay una tarea en la cola de microtareas también, en el caso de que haya una tarea, el bucle de eventos pasará la tarea en la cola de microtareas al call stack, y finalmente cuando la tarea se complete y se elimine del call stack, la tarea programada que estaba en la cola programada, y se pasó a la cola de eventos, se pasará al call stack.
En la imagen de abajo podemos ver una vista general del motor JavaScript; en este caso “Web Api” es donde va a caer la tarea programada. Por razones prácticas, hemos dividido la cola en dos, la cola de eventos y la cola de microtareas para entender mejor cómo el bucle de eventos prioriza la ejecución.
Ahora que sabemos cómo funciona el bucle de eventos, podemos escribir un mejor código asíncrono con una comprensión más profunda de los principales conceptos detrás de JavaScript, es la belleza de la comprensión del proceso y darse cuenta de que no hay magia allí, es sólo el arte de la ingeniería creado por mentes increíbles que tiene un impacto en la forma en que desarrollamos aplicaciones web y las posibilidades que tenemos como desarrolladores para cambiar la vida de millones de usuarios en todo el mundo.
Hagamos brillar una luz en la oscuridad y salvemos a los usuarios de stack overflow.
Autor: Yosef Blandin
Visíta nuestra página web y conoce nuestros servicios: https://turpialdev.com/
¡Síguenos!
https://www.instagram.com/turpialdev/
https://www.facebook.com/turpialdev
https://www.linkedin.com/company/turpial-development
