¿Cómo funciona JavaScript detrás de escena?

Profundicemos más y comprendamos la ejecución de JavaScript dentro del motor del navegador:

Como todos sabemos, JavaScript es un lenguaje de programación de alto nivel, basado en prototipos, orientado a objetos, interpretado o compilado justo a tiempo, de un solo subproceso, con funciones de primera clase y un modelo de concurrencia de bucle de eventos sin bloqueo.

Y se está volviendo más y más popular día a día. Este artículo pretende profundizar en JavaScript y cómo funciona realmente.

Descripción general

Esta publicación de blog es apta para principiantes y también útil para desarrolladores de JS experimentados.
Revisaremos todos estos conceptos en detalle y explicaremos cómo se ejecuta realmente JavaScript.

En esta publicación, analizaremos el contexto de ejecución (fase de creación de memoria y fase de ejecución de código), la ejecución de CallStack y el motor de JavaScript, y su entorno de tiempo de ejecución. Además, comprenda el concepto del bucle de eventos y el flujo de pila.

Este será un recorrido general de todos los componentes principales que están involucrados en la ejecución del script.
Aquí hablaremos de los siguientes componentes:

1. Motor JavaScript.
2. Entorno de tiempo de ejecución de JavaScript.
3. Contexto de ejecución.
4. Ejecución de pila de llamadas y flujo de pila.
5. Bucle de eventos.

Como habrás oído antes, JavaScript es un lenguaje de programación interpretado . Significa que el código fuente no se compila en código binario antes de la ejecución.
Esto significa que se ejecuta línea por línea, pero no es 100% cierto.
JS es un lenguaje compilado justo a tiempo (JIT), este comportamiento moderno lo hace rápido en las aplicaciones web; de lo contrario, según el tipo interpretado, hace que la aplicación sea lenta de procesar. Entonces, consideramos que JS es un lenguaje de compilación Just-in-time (JIT).

El motor JavaScript es simplemente un programa de computadora que ejecuta código JavaScript. Los motores de JavaScript están integrados en todos los navegadores modernos de hoy.

Me gusta: (Pocos motores lo son)
# V8 es el motor de JavaScript para Chrome.
# Mono araña para Mozilla Firefox.
#Chakra para Microsoft Edge.
# Núcleo de JavaScript para Safari, etc.

Como sabemos, el motor del navegador Chrome "V8" es muy popular para JavaScript.
Consta de dos componentes principales:
1: Pila de llamadas ( discutir más adelante en detalle, sea paciente... )
2: Heap : Es un espacio de memoria no estructurado donde se encuentran todos los objetos útiles . almacenado.

El entorno de tiempo de ejecución de JavaScript (JRE):

Como discutimos sobre el motor JS, pero el motor JS se ejecuta dentro de JRE junto con algunos otros componentes. como algunas solicitudes y llamadas asincrónicas.
Los componentes se enumeran como:

1. Motor JS
2. API web
3. Cola de devolución de llamada o cola de mensajes
4. Bucle de eventos

Cuando se ejecuta el código JS, se crea un contexto de ejecución global (GEC) .
Esta ejecución se crea en 2 fases:
1: fase de creación de memoria y
2: fase de ejecución de código.

Tomemos un ejemplo;

Para este fragmento de código anterior,
primero, se crea GEC y en qué fase de memoria se crea y asigna un valor indefinido para todas las variables y coloca el bloque de funciones completo {} como valor fnxn en su espacio de memoria.

En segundo lugar, ahora en la segunda fase, es decir, la fase de ejecución de código, comienza a recorrer todo el código línea por línea.
Y encontró var a = 3, por lo que asignó 3 a una variable que no estaba definida , pasó
a la siguiente línea y asignó 4 a la variable b que no estaba definida. Ahora pase a la siguiente línea para la función add(), no hay nada que ejecutar, por lo que permanece igual y pase a la siguiente línea para var c.

En esta línea, se crea un nuevo contexto de ejecución, el nombre como contexto de ejecución local para la función agregar (3,4), ahora nuevamente se crean 2 fases,
para la fase de creación de memoria , asigna undefined para las variables num1, num2 y resultado. Luego, en la fase de ejecución del código , comienza línea por línea en el bloque de funciones { } de add().
Encontró asignar 3 para num1 y 4 para num2,
y luego para var result = num1+num2, y asigne 7 como variable de resultado.
Después de eso, devuelve el resultado y el control de la ejecución vuelve a la línea 9 en
var c = 7.

Cuando se encuentra la palabra clave de retorno , devuelve el control a la línea llamada y también se elimina el contexto de ejecución de la función.
Se mueve a la siguiente línea, línea 10: consola el valor de c.

Así es como el contexto de ejecución realmente funciona detrás de escena.

Javascript administra la creación y eliminación del contexto de ejecución de código con la ayuda de Call Stack ( hablaremos más adelante sobre la pila de llamadas )

Pila de llamadas :

Call Stack mantiene el orden de ejecución de los contextos de ejecución . También se conoce como pila de programa, pila de control, pila de tiempo de ejecución, pila de máquina, pila de contexto de ejecución.
Y sabemos que JS es un lenguaje de programación de un solo subproceso , lo que significa que tiene una sola pila y ejecuta una línea a la vez.

Simplemente tomando la referencia del código anterior y explicando cómo funciona la pila de llamadas para el mismo fragmento de código.

Aquí, GEC creó y cae en la pila, luego el siguiente contexto de ejecución local aparece para apilar y luego, después de la ejecución, aparece y vuelve a GEC.
Luego, console.log(c) aparece y, después de la ejecución, aparece, luego vuelve a GEC.
Después de que se completa la ejecución, GEC también aparece de la pila y la pila se vacía como una condición INACTIVA.

Bucle de eventos:

El lenguaje JavaScript también se puede ver de dos maneras: sincrónica y asincrónica.

En JS sincrónico, el código se ejecuta línea por línea, lo que significa de manera secuencial, y
en JS asíncrono, nada es secuencial, lo que significa que una línea de códigos se ignorará y ejecutará más tarde según el comportamiento conocido principalmente como API web.

Por lo tanto, el bucle de eventos se usa para manejar la parte asíncrona con la cola de devolución de llamadas, y espera a que la pila se vacíe y luego se envía a la pila para su ejecución.

Event Loop es una función en JS que verifica continuamente si la pila principal está vacía. Y cuando está vacío, comprueba la cola de devolución de llamada. Si hay códigos en la cola para ejecutar, se transfieren uno por uno a la pila de llamadas. Después de que se ejecuta el código, deja la pila y aparece el siguiente en la cola hasta que la cola está vacía.

Chicos, terminemos las cosas y los veremos en las próximas publicaciones ……….