Funcionamiento del Motor JavaScript y Contexto de Ejecución

Clase 5 de 13 • Curso de JavaScript Engine (V8) y el Navegador

Resumen

Una vez que se ejecuta un archivo en el navegador, el motor de JavaScript genera un entorno global (Global environment). El entorno global hace tres cosas muy importantes:

Genera un objeto global llamado window.
Genera un contexto llamado this. En un contexto global this es igual a window.
Ambiente de ejecución.

Después de generar el entorno global, comienza el contexto de ejecución (Execution context) donde corre el código de JavaScript utilizando un Stack de tareas, apilándolas una por una, en la cuál la última tarea añadida será la primera en ejecutarse.

Una vez que el motor de JavaScript está interactuando con el navegador, realiza los siguientes procesos:

Parser: genera un parseo del documento completo mediante palabras claves.
AST: Se crea a partir de los nodos que genera el parser. Es una estructura de árbol que representa tu código sintácticamente. Puedes utilizar la página AST Explorer{target="_blank"} para ver cómo funciona.
Intérprete: El intérprete recorre el AST y genera Bytecode (lenguaje que entiende la computadora y no es binario) basado en la información que contiene. Sin embargo, si el intérprete detecta que puede optimizar tu código, no genera Bytecode, sino que genera un proceso de optimización que consiste en el profiler y compiler.
Profiler y compiler: El profiler monitorea y mira el código para optimizarlo. El compiler optimiza ese código y genera machine code (lenguaje binario). En esta etapa, por la intención de optimizar el código, también genera errores como el Hoisting.

Engine JavaScript
Contribución creada por Andrés Guano.

Filiberto Santillán

student•

Les comparto un artículo que escribí acerca del tema. .

Alfredo Sánchez

student•

Muy interesante gracias por el aporte.

Javier Andrés Moreno Tocarruncho

student•

Fili te envío un gran saludo desde Bogotá, Colombia y te felicito por el gran blog que tienes. Bastante profesional y motivante ver todo lo que has podido avanzar en este maravilloso mundo. Un seguidor más! 😅

Iván Darío Sánchez Jiménez

student•

Una vez el motor recibe un archivo JS genera un Global enviroment
En el Global enviroment se genera un Global object que es igual a window
También se genera una variable this
this depende del contexto, en el entorno global this es igual al objeto global
Ya despues de generado el entorno global, comienza a correr nuestro código en el contexto de ejecucion, a través de un stack de tareas apiladas
Una vez que el motor comienza a interactuar con el navegador, genera un parseo del documento completo, para encontrar las keywords y las pasa al AST (abstract syntax tree)

AST Explorer

Una vez se tiene el AST, el motor lo pasa al interpreter para retornar bytecode puede ser entendido por la máquina
Si en la interpretación del AST ve mucho código que se repite y que se puede optimizar entra el profiler o monitor, y optimiza el codigo y lo regresa compilado como bytecode para que la máquina lo pueda comprender. Es justo en este paso donde aparece el hoisting, donde el motor en su función de optimizacion reinterpreta el código de una mejor forma y se pueden presentar errores de programacón.
El hoisting solo sucede con variables y funciones que se mandan a llamar.

José Gregorio Block

company_admin•

#Gracias

Andres Gallego

student•

Gracias por tus notass!

Leonardo de los angeles Espinoza Hernandez

student•

Les comparto este fragmento de un apunte por si alguien quería saber la diferencia entre bytecode y Machine code como yo

Roberto Shirásago Domínguez

student•

pero entonces quien es la virtual machine de javascript? v8?

Guillermo Baldán López

student•

¿El bycode es universal? ¿Un bycode generado en un PC A cualquiera puede correr en un PC B cualquiera?

Eddy Arellanes

student•

Esto, el hoisting, event loop y otros conceptos en este curso son cosas muy preguntadas en las entrevistas para JS developer (Front o Back) entonces aquí si vale mucho crear notas ;) (Y)

Miguel Angel Morales Larriega

student•

Engine es un intérprete que compila código JavaScript a bytecode. .

José Gregorio Block

company_admin•

#Nice

Andrés Felipe Eslava Zuluaga

student•

Qué buena imagen. Gracias!

Francisco Garcia [C6]

student•

El navegador genera un entorno global -> window hace 3 cosas

Objeto Global -> window
this -> depende del contexto o ambito
otros ambientes

Aqui pas al contexto de ejecucion (execution context)

y Lugo si corre el codigo: Lo corre a travez de un stack de tareas, las aplia una a una

JS -> parser -> AST abstrac sintax tree -> interpreter -> Bytecode (no es lengauje de maquina) pero lo entiende la maquina

Si el interpreter, se da cuenta que hay codigo que puede optimizar,

interpreter -> Profiler (monitor) -> compiler -> otimized code [aqui es donde ocurre el hoisting]. aqui es donde eventualmente se generan errores, ya que la maquina trata de optimizar o mejorar el codigo y es donde se pueden dar errores desonocidos. Es necesario tratar de evitar el hoisting el hoisting ocurre con variables y funciones que se mandan llamar

Carlos Eduardo Diaz Polanco

student•

Dos preguntas de examen: Cuando hablamos de Windows, nos referimos a un objeto global, tambien se crea una variable llamada This, que hace referencia al objeto global de windows.

Lizandro José Ramírez Difo

student•

Si, this global se refiere al objeto Windows donde se está ejecutando tu código js. Esto suele confundir bastante, pero puedes verlo de esta manera: Todo tu programa en js depende de una instancia de la clase windows en tu browser, en las clases identificas las variables de instancia con this (en Python se usa self) esto ayuda a diferenciar las clases de los objetos (instancias que crees de la clase). Te recomiendo ver el curso de programación orientada a objetos para que entiendas por donde van los hilos.

Fernando Quinteros Gutierrez

student•

👀 Profundizando en el Engine

Recursos

AST explorer

Apuntes

Una vez que corre el archivo de JS
Lo primero que hace el navegador es generar un entorno global
- Objeto global principal ⇒ Window
- This = window
- Outer Enviroment
Contexto de ejecución
- Corre tu código ⇒ Mediante una pila de tareas

Pasos de ejecución de un código JS

Parseo ⇒ encontrar claves principales [keyboards]
AST [Abstract syntax tree]
Interpreter
Bytecode ⇒ No es tan bajo como el codigo binario pero si lo puede entender la maquina

Si en el parseo del árbol, el interprete se da cuenta que hay código duplicado

Entra en acción un profiler (Monitor) ⇒ optimizandolo
Lo compila
Regresa código optimizado

En este proceso se general el Hoisting

RESUMEN: Al momento de interpretar el código suceden diferentes cosas por detrás, lo mas importante es que se convierte a código maquina y se optimiza si hay código duplicado generando algo llamado hoisting

Josue Cerron Tuesta

student•

Gracias!

Gonzalo Pimentel

student•

Justamente esto del entorno global es uno de los bugs mas comunes en JavaScript ya que aveces llamas una función o variable en un bloque de código y te aparece undefined ya que el this de esta función está apuntando al window o entorno global y tu quieres que apunte al entorno local....tiene que ver con los scopes de las variables.

Lizandro José Ramírez Difo

student•

Bueno es un bug que suele diferencial mucho un profesional de alguien que está aprendiendo, todos pasamos por él, pero en Platzi es el único lugar que he visto que tratan de dejarlo bien claro.

Luis Angel Vásquez Nepomuceno

student•

Si quieren saber cómo se ve el bytecode pueden crear un archivo (en este ejemplo index.js) y usar el siguiente comando:

node --print-bytecode index.js

Lo leí acá, por si gustan.

Josue Cerron Tuesta

student•

Gracias por el aporte!

Christian David Sánchez

student•

Hoisting: es el comportamiento predeterminado de JavaScript de mover las declaraciones a la parte superior.

Roberto Shirásago Domínguez

student•

1.- Una vez que corre el archivo en el engine, antes de empezar a traducir, GENERA UN ENTORNO GLOBAL, 2.- Se genera el objeto principal que se llama WINDOW 3.- Despues genera una variable que se llama "this" 4.- Empieza a correr nuestro código en el contexto de ejecución, lo corre a traves de un stack de tareas (las apila una por una) 5.- Ya que esta interactuando el motor con el navegador, genera un PARSEO del documento completo, lo cual le ayuda a encontrar las claves principales (key words) 6.- Se genera el Arbol de sintaxis abstracta (AST) con las key words, el cual va a parsear el navegador despues 7.- Interpreta el arbol (y ahi entra un profiler que ayuda a optimizar el código) JUSTAMENTE donde entra el HOISTING 8.- Al final genera Bytecode el cual entiende la maquina

Alejandro Betancur

student•

Alguien me puede explicar que es el Outer Environment?

Luis Lira

student•

Hola!

Creo que por Outer Environment también se le puede llamar "ámbito léxico", este ámbito léxico no es mas que el bloque donde fue creara una función y que puede acceder a todos los demás elementos que están dentro de ese bloque.

Si quieres aprender más sobre este término de ámbito léxico y de scope, te recomiendo tomar el Curso de Closures y Scope en JavaScript

Santiago Bastidas Rodríguez

student•

Profundizando en el Engine

Se crea un Entorno global que genera 3 cosas:
1. Un objeto global llamado window .
2. Una variable llamada this que depende del contexto en el que se llame, en el entorno global ó global scope, this es igual a window .
3. El outer environment que es un entorno llamado por el entorno lexico de javascript.

Contexto de ejecución

Es la forma cómo se corre el código que es en forma de pila.

El archivo de JS primero se parsea mediante AST (Sintaxis de Árbol Abstracta) para identificar las variables y las funciones y entender que parametros cumplen en esa sintaxis. Finalmente se genera Bytecode que es una forma en que entiende el navegador. También el motor puede optimizar algunos pasos en caso que vea que haya código repetido.

Miguel Angel Soler

student•

Hoisting es el comportamiento por defecto de JavaScript en el que la declaración de variables y funciones se mueve automáticamente al principio del scope (ya sea el principio del archivo, la función o el bloque). Mira este ejemplo:

greetMiguel()

function greetMiguel() {
  console.log("Hello Miguel")
}

A pesar de que estamos invocando la función **greetMiguel **antes de definirla, esto funciona; la declaración de la función se mueve al principio del archivo antes de ejecutarlo. La declaración de las variables también se mueve, pero no la inicialización. Mira este ejemplo:

console.log(name);
let name = 'Miguel Soler';

El resultado de este código es undefined porque, aunque la declaración de name se mueve al principio, la inicialización no. El anterior código es igual a:

let name;
console.log(name);
name = 'Miguel Soler';

Por esta razón, si asignamos una función a una variable, la función no se mueve al principio y no la vamos a poder invocar antes:

greetMiguel(); // Error, greetMiguel is not a function

const greetMiguel = function() {
  console.log("Hello Miguel");
}

Lo mismo ocurriría si cambiamos la función por una función flecha. Recuerda y repítelo a diario: Lo que se mueve es la declaración de la variable, no la inicialización.

Wonder Jhonny Diaz Gonzalez

student•

Global Environment: Entorno Global Global Object: Objeto Global This: Variable que depende del contexto Outer environment: Entorno Externo Execution Context: Contexto de Ejecución para las tareas

Jesus David Duarte

student•

alguien me podria explicar que es parser?

John Cardenas

student•

Hola David!

parse() es un método de JS. Su función es convertir (o parsear) una cadena de texto (un string) a formato JSON.

Aquí te dejo una documentación donde se muestran algunos ejemplos: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/parse

Saludos!

Santiago Arboleda Londoño

student•

Mira esto David

Aquí te explican más sobre el parser: https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf

Jorge Fidel Zubieta Choque

student•

Que paso con el Outer Enviroment de que me perdi?

Giuseppe Ramirez

student•

Hola, Jorge 👋 Puede interpretarse como el ámbito léxico y es el scope al cuál está asignada una función, con lo que también, dependiendo del contexto, cambiaría el this. Buena pregunta, por cierto :)

Carlos Eduardo Gomez García

teacher•

El AST es genial porque gracias a el podemos desarrollar nuestras propias reglas para ESLint, en el curso profesional de JavaScript te enseñan esto, y básicamente el bytecode es muy parecido a código de los niveles de Assembler jaja

DARWIN JUAN CARLOS CATUNTA GARCIA

student•

Genial, muchas gracias @RetaxMaster

Jose Barboza

student•

se puede escribir en AST (Abstrack syntax tree) directamente?

Irving Juárez

student•

Ese lo genera el navegador por defecto. No se si alguna vez has manipulado el DOM, pero cuando hacemos eso, se ve muy claro como el AST lo genera el navegador, nosotros solo escribimos el código en JavaScript y el navegador hace el resto.