Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 9D : 6H : 9M : 52S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Profundizando en el Engine

5/13

Les comparto un artículo que escribí acerca del tema.
.
js-engine-complete@2x.png

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

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

bytecode-machine-code.jpg

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

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

  1. Objeto Global -> window
  2. this -> depende del contexto o ambito
  3. 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

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)

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.

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.

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

👀 Profundizando en el Engine

<h4>Recursos</h4>

AST explorer

<h4>Apuntes</h4>
  • 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

  1. Parseo ⇒ encontrar claves principales [keyboards]
  2. AST [Abstract syntax tree]
  3. Interpreter
  4. 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

Hace unos meses estuve leyendo esta serie de artículos sobre V8 y como optimizar nuestro código, se los recomiendo:

1_AKKvE3QmN_ZQmEzSj16oXg.png

https://medium.com/reactbrasil/como-o-javascript-funciona-dentro-da-engine-v8-5-dicas-sobre-como-escrever-código-otimizado-e05af6088fd5

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.

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

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

No entiendo, según el profesor la maquina entiende y ejecuta Bytecode y ya, pero he estado investigando y decían que pasa a Machine Code y ahí se ejecuta.
Aquí no explican a profundidad; el hecho de que el motor funciona con un interprete y compilador y que el código optimizado es Machine Code y demas.

  1. El navegador apenas recibe un JS lo primero que hace es crear un Global environment , más conocido como Window
    1. Genera un objeto global.
    2. Variable this.
  2. Se genera un contexto de ejecución
    1. Parser para encontrar Keywords para pasarlas al AST.
    2. Crea el AST (Abstract Sintax Tree).
    3. Interpreter y retorna bytecode, si en la fase de interprete detecta algo que se pueda optimizar se pasa a un profiler para que optimize, compile y optimice a bytecode. En este paso es donde se genera el Hoisting

En el curso de Fundamentos de javascript vemos algo sobre este tema y el cuidado que hay que tener con this.

En el curso de JavaScript Profecional con @sparragus se explica un poco mejor y con mas detalles.

Hoisting, no hosting

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

-Pasear sígnifica analizar y descomponer un STRING (conjunto de caracteres) escrito en un LENGUAJE FORMAL

-DESCOMPONER significa DIVIDIR el STRING según reglas y key-words del lenguaje

-ANALIZAR significa darle un sentido a esas descomposiciones , gracias a las key-words y reglas

-EL objetivo de parsear es producir una estructura de ejecución (ARBOL-TREE) y que sea capaz de entenderlo una computadora

hoisting, es cuando usas variables sin haberlas declarado antes
ejemplo

var duplicarEdad = edad * 2
var edad              = 31;

Esto es lo visto en un capitulo del curso profesional de js pero mas desglosado

El tener buenas prácticas no solo ayuda a que el código sea mas legible, también ayuda a convertir nuestro código a lenguaje maquina

Les comparto el siguiente artículo para entender un poco mejor this:
.
This en diferentes situaciones y su comportamiento:
https://filisantillan.com/this-en-diferentes-situaciones-y-su-comportamiento/

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

Profile nos ayudar optimizar nuestro codigo para cuando se genera el Bytecode
AST -> Arbol de sintaxy

Genial explicado, creemos que es magia lo que ocurre ya que lo hace muy rápido pero luego explicado todo cobra sentido aunque sigue con algo de magia 😄

Esto lo escuché por primera vez en el curso profesional de Javascript, y esta explicación me complementó aquella información. Increíble lo que pasa internamente

Profile nos ayudar optimizar nuestro codigo para cuando se genera el Bytecode

Listo…

El profiler (monitor) es el encargado de optimizar el código que mandamos. Aquí es donde ocurre el hoisting, un proceso que al no entenderlo puede causar errores en tu código.

Que tal compañeros, les dejo mis apuntes de la clase, de esta manera entiendo mejor los temas y se me es mas facil recordar depsues… espero les sirva

Profundizando en el Engine
Global Environment: Una vez se corre el archivo de JavaScript en el Engine, se crea una especie de entorno global. Al crearse el entorno global y hace tres cosas:
• Global Object
• Variable this

Después de crear mi objeto global y la variable de this (con el cual llamo mi objeto global), se genera algo llamado Execution Context (Contexto de ejecución): Es el momento en donde se empieza a correr nuestro código JS. Corriendo el código en un stack de tareas 1 por 1.
Al empezar a interactuar motor de JavaScript con el navegador es:

  1. Genera un parseo
  2. Después genera un AST(Abstract syntax tree)
  3. Se lleva para interpretar y llevarlo a Bytecode (lenguaje que puede entender la máquina)
  4. Si durante el parseo de este árbol, el intérprete se da cuenta que hay mucho código o que puede optimizar código. Es donde entra lo siguiente:
    4.1. Profiler (Monitor): El cual nos ayuda a optimizar nuestro código, y después lo
    compila y lo regresa como ByteCode.

En el Curso Básico de JavaScript explica que es el Hoisting, podemos repasar la clase Aqui!

Buena info neni

y después escupe código binario…basten agresivo, me gusta zD

Excelente!

AST -> Arbol de sintaxy

Muy bueno

Al decir que Bytecode es el lenguaje interpretado por la maquina…

¿maquina se refiere al V8 Engine o al computador?

Genial

Les dejo este artículo muy explicativo: Contexto de ejecución

Interesante la comprensión de la estructura del motor😁😊

WHAT DOES THE ENGINE.
The engine once gets the code from the JavaScript file it does choose the main object “global object” that would be the window and its “this” references. After this process, it starts to create the “AST (Abstract syntax tree)” to be interpreted and translate it into Bytecode that the computer can understand.
Also, before translated the Engine will optimize the code but this help can bring some problems like the “hosting” between variables and function

Es cuando el motor de V8 al intentar ayudarnos a optimizar el codigo, nos puede generar algunos errores.
En este video Sacha lo explica de una manera muy didactica.
https://www.youtube.com/watch?v=uI6o97A4IrI

En este clase me quedaron mas claro algunos conceptos, que me estaban dando problemas. Genial

JS Engine es un mini programa que interpreta nuestro código y ejecuta un script de acuerdo a las instrucciones del código. Posteriormente, este es parseado es decir, va leyendo nuestro código línea por línea y revisa la sintaxis. Cuando detecta errores, detiene la ejecución, en caso de que todo vaya bien, entonces produce una estructura de datos llamada Abstract Syntax Tree (AST) después se traduce a código máquina y esta finalmente lo ejecuta.

parser ats.png

Resumen:
Profundizando el Engine.

Cuando el motor de Js comienza a interactuar, empieza por realizar un Parseo(parser), esto le ayuda a encontrar las claves principales.Luego el resultado se pasa al AST(Abstract Sintax Tree). A continuacion se interpreta y se convierte a ByteCode.

Durante el interpretado si el interprete se da cuenta que hay mucho codigo para optimizar, actua el Profile(monitor), el cual ayuda a cumplir esta tarea. Al finalizar la optmizacion el codigo se compila y lo regresa como ByteCode.

Durante esta tarea es donde se puede encontrar el hoisting.

Una vez que corre nuestro archivo en el motor, lo que hace el navegador es crear un objeto principal llamado window que esta en un entorno global. Y este entorno global hace tres cosas, la primera es crear este objeto global llamado window, después genera una variable llamada “this” que hara referencia a nuestro objeto global. Ya que se crea este entorno global, se corre nuestro código y esto lo hace atreves de un stack de tareas que ira apilando una por una.
Si JS detecta que nuestro código se puede optimizar, toma el segundo camino, pero esto es por que seguimos malas practicas, y en este proceso de optimizado se genera algo llamado Hoisting. Esto funciona con variables y funciones y nos puede generar problemas.

js.png

El Bytecode es un código intermedio que se puede tomar como un binario ejecutable. Su utilidad es que corre independientemente de la arquitectura de la computadora y de el sistema operativo.

El Bytecode aún necesita un interprete para ser ejecutado, ya que se necesita convertir ese Bytecode al set de instrucciones adecuado para la arquitectura en la que se corre.

si se usa "use strict" en el entorno global this no es asignado a window, es undefined.

Gracias muy bueno.

MY NOTES DEEPENING IN THE ENGINE 😄
En esta clase veremos que es lo que sucede mas a fondo en el motor de js

Una vez que corre el archivo de js en engine antes de empezar a traducirlo

genera un entorno global Global Environment

Este entono global es un objeto principal al cual se le llama window

El entorno global hace 3 cosas:

  • Genera un objeto global = window
  • Genera una variable llamada this, esta variable this depende del contexto en el que la estes llamando, en este caso this en el entorno global this es igual al objeto global osea igual a window

Despues de que genera estos dos el objeto global y variable this llega algo llamado Execution Context ya que genero este entorno global empieza a correr nuestro codigo

Esta parte de correr de codigo la hace atraves de un stack de tareas donde ira apilando cada una de ellas

Una vez el motor de js esta interactuando con el navegador

  • Genera un parseo del documento completo para encontrar estas claves principales
  • Despues lo pasa al AST que es el arbol de sintaxis abstracta
  • Una vez tiene este arbol lo que hace es interpretar y despues devuelve bytecode que es el lenguaje que entiende la maquina
  • Existe un paso intermedio en donde el navegador se da cuenta que el codigo puede ser optimizado por malas practicas em el codigo y una vez lo optimiza lo regresara como bytecode

PARSING quiere decir analizar y convertir un programa en un formato interno que un ambiente que corre en tiempo real (Runtime) puede procesar, por ejemplo, el motor V8 de javascript en el navegador.

  • Hoisting es la forma en cómo Javascript interpreta las declaraciones que ocurren en nuestro código, para de ésta forma darle un contexto en el momento de ejecución.
  • Esto es que cuando escribimos código JS, el motor va a agarrar eso escrito y por medio de su contexto de ejecución va a realizar un Parser, un analisis de lo que está escrito.
  • Si encuentra algo mal, detiene su ejecución y devuelve el error.
  • Por lo contrario, enviará todo al AST para que, de acuerdo a su estructura, se construye un árbol de sintaxis de lo que llegó del Parser.
  • Esto se interpreta y si es necesario se optimiza, para finalmente enviarlo a que lo lea la máquina por medio del Byte Code.

Les comparto un artículo que escribí acerca del tema.
.
js-engine-complete@2x.png

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

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

bytecode-machine-code.jpg

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

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

  1. Objeto Global -> window
  2. this -> depende del contexto o ambito
  3. 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

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)

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.

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.

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

👀 Profundizando en el Engine

<h4>Recursos</h4>

AST explorer

<h4>Apuntes</h4>
  • 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

  1. Parseo ⇒ encontrar claves principales [keyboards]
  2. AST [Abstract syntax tree]
  3. Interpreter
  4. 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

Hace unos meses estuve leyendo esta serie de artículos sobre V8 y como optimizar nuestro código, se los recomiendo:

1_AKKvE3QmN_ZQmEzSj16oXg.png

https://medium.com/reactbrasil/como-o-javascript-funciona-dentro-da-engine-v8-5-dicas-sobre-como-escrever-código-otimizado-e05af6088fd5

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.

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

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

No entiendo, según el profesor la maquina entiende y ejecuta Bytecode y ya, pero he estado investigando y decían que pasa a Machine Code y ahí se ejecuta.
Aquí no explican a profundidad; el hecho de que el motor funciona con un interprete y compilador y que el código optimizado es Machine Code y demas.

  1. El navegador apenas recibe un JS lo primero que hace es crear un Global environment , más conocido como Window
    1. Genera un objeto global.
    2. Variable this.
  2. Se genera un contexto de ejecución
    1. Parser para encontrar Keywords para pasarlas al AST.
    2. Crea el AST (Abstract Sintax Tree).
    3. Interpreter y retorna bytecode, si en la fase de interprete detecta algo que se pueda optimizar se pasa a un profiler para que optimize, compile y optimice a bytecode. En este paso es donde se genera el Hoisting

En el curso de Fundamentos de javascript vemos algo sobre este tema y el cuidado que hay que tener con this.

En el curso de JavaScript Profecional con @sparragus se explica un poco mejor y con mas detalles.

Hoisting, no hosting

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

-Pasear sígnifica analizar y descomponer un STRING (conjunto de caracteres) escrito en un LENGUAJE FORMAL

-DESCOMPONER significa DIVIDIR el STRING según reglas y key-words del lenguaje

-ANALIZAR significa darle un sentido a esas descomposiciones , gracias a las key-words y reglas

-EL objetivo de parsear es producir una estructura de ejecución (ARBOL-TREE) y que sea capaz de entenderlo una computadora

hoisting, es cuando usas variables sin haberlas declarado antes
ejemplo

var duplicarEdad = edad * 2
var edad              = 31;

Esto es lo visto en un capitulo del curso profesional de js pero mas desglosado

El tener buenas prácticas no solo ayuda a que el código sea mas legible, también ayuda a convertir nuestro código a lenguaje maquina

Les comparto el siguiente artículo para entender un poco mejor this:
.
This en diferentes situaciones y su comportamiento:
https://filisantillan.com/this-en-diferentes-situaciones-y-su-comportamiento/

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

Profile nos ayudar optimizar nuestro codigo para cuando se genera el Bytecode
AST -> Arbol de sintaxy

Genial explicado, creemos que es magia lo que ocurre ya que lo hace muy rápido pero luego explicado todo cobra sentido aunque sigue con algo de magia 😄

Esto lo escuché por primera vez en el curso profesional de Javascript, y esta explicación me complementó aquella información. Increíble lo que pasa internamente

Profile nos ayudar optimizar nuestro codigo para cuando se genera el Bytecode

Listo…

El profiler (monitor) es el encargado de optimizar el código que mandamos. Aquí es donde ocurre el hoisting, un proceso que al no entenderlo puede causar errores en tu código.

Que tal compañeros, les dejo mis apuntes de la clase, de esta manera entiendo mejor los temas y se me es mas facil recordar depsues… espero les sirva

Profundizando en el Engine
Global Environment: Una vez se corre el archivo de JavaScript en el Engine, se crea una especie de entorno global. Al crearse el entorno global y hace tres cosas:
• Global Object
• Variable this

Después de crear mi objeto global y la variable de this (con el cual llamo mi objeto global), se genera algo llamado Execution Context (Contexto de ejecución): Es el momento en donde se empieza a correr nuestro código JS. Corriendo el código en un stack de tareas 1 por 1.
Al empezar a interactuar motor de JavaScript con el navegador es:

  1. Genera un parseo
  2. Después genera un AST(Abstract syntax tree)
  3. Se lleva para interpretar y llevarlo a Bytecode (lenguaje que puede entender la máquina)
  4. Si durante el parseo de este árbol, el intérprete se da cuenta que hay mucho código o que puede optimizar código. Es donde entra lo siguiente:
    4.1. Profiler (Monitor): El cual nos ayuda a optimizar nuestro código, y después lo
    compila y lo regresa como ByteCode.

En el Curso Básico de JavaScript explica que es el Hoisting, podemos repasar la clase Aqui!

Buena info neni

y después escupe código binario…basten agresivo, me gusta zD

Excelente!

AST -> Arbol de sintaxy

Muy bueno

Al decir que Bytecode es el lenguaje interpretado por la maquina…

¿maquina se refiere al V8 Engine o al computador?

Genial

Les dejo este artículo muy explicativo: Contexto de ejecución

Interesante la comprensión de la estructura del motor😁😊

WHAT DOES THE ENGINE.
The engine once gets the code from the JavaScript file it does choose the main object “global object” that would be the window and its “this” references. After this process, it starts to create the “AST (Abstract syntax tree)” to be interpreted and translate it into Bytecode that the computer can understand.
Also, before translated the Engine will optimize the code but this help can bring some problems like the “hosting” between variables and function

Es cuando el motor de V8 al intentar ayudarnos a optimizar el codigo, nos puede generar algunos errores.
En este video Sacha lo explica de una manera muy didactica.
https://www.youtube.com/watch?v=uI6o97A4IrI

En este clase me quedaron mas claro algunos conceptos, que me estaban dando problemas. Genial

JS Engine es un mini programa que interpreta nuestro código y ejecuta un script de acuerdo a las instrucciones del código. Posteriormente, este es parseado es decir, va leyendo nuestro código línea por línea y revisa la sintaxis. Cuando detecta errores, detiene la ejecución, en caso de que todo vaya bien, entonces produce una estructura de datos llamada Abstract Syntax Tree (AST) después se traduce a código máquina y esta finalmente lo ejecuta.

parser ats.png

Resumen:
Profundizando el Engine.

Cuando el motor de Js comienza a interactuar, empieza por realizar un Parseo(parser), esto le ayuda a encontrar las claves principales.Luego el resultado se pasa al AST(Abstract Sintax Tree). A continuacion se interpreta y se convierte a ByteCode.

Durante el interpretado si el interprete se da cuenta que hay mucho codigo para optimizar, actua el Profile(monitor), el cual ayuda a cumplir esta tarea. Al finalizar la optmizacion el codigo se compila y lo regresa como ByteCode.

Durante esta tarea es donde se puede encontrar el hoisting.

Una vez que corre nuestro archivo en el motor, lo que hace el navegador es crear un objeto principal llamado window que esta en un entorno global. Y este entorno global hace tres cosas, la primera es crear este objeto global llamado window, después genera una variable llamada “this” que hara referencia a nuestro objeto global. Ya que se crea este entorno global, se corre nuestro código y esto lo hace atreves de un stack de tareas que ira apilando una por una.
Si JS detecta que nuestro código se puede optimizar, toma el segundo camino, pero esto es por que seguimos malas practicas, y en este proceso de optimizado se genera algo llamado Hoisting. Esto funciona con variables y funciones y nos puede generar problemas.

js.png

El Bytecode es un código intermedio que se puede tomar como un binario ejecutable. Su utilidad es que corre independientemente de la arquitectura de la computadora y de el sistema operativo.

El Bytecode aún necesita un interprete para ser ejecutado, ya que se necesita convertir ese Bytecode al set de instrucciones adecuado para la arquitectura en la que se corre.

si se usa "use strict" en el entorno global this no es asignado a window, es undefined.

Gracias muy bueno.

MY NOTES DEEPENING IN THE ENGINE 😄
En esta clase veremos que es lo que sucede mas a fondo en el motor de js

Una vez que corre el archivo de js en engine antes de empezar a traducirlo

genera un entorno global Global Environment

Este entono global es un objeto principal al cual se le llama window

El entorno global hace 3 cosas:

  • Genera un objeto global = window
  • Genera una variable llamada this, esta variable this depende del contexto en el que la estes llamando, en este caso this en el entorno global this es igual al objeto global osea igual a window

Despues de que genera estos dos el objeto global y variable this llega algo llamado Execution Context ya que genero este entorno global empieza a correr nuestro codigo

Esta parte de correr de codigo la hace atraves de un stack de tareas donde ira apilando cada una de ellas

Una vez el motor de js esta interactuando con el navegador

  • Genera un parseo del documento completo para encontrar estas claves principales
  • Despues lo pasa al AST que es el arbol de sintaxis abstracta
  • Una vez tiene este arbol lo que hace es interpretar y despues devuelve bytecode que es el lenguaje que entiende la maquina
  • Existe un paso intermedio en donde el navegador se da cuenta que el codigo puede ser optimizado por malas practicas em el codigo y una vez lo optimiza lo regresara como bytecode

PARSING quiere decir analizar y convertir un programa en un formato interno que un ambiente que corre en tiempo real (Runtime) puede procesar, por ejemplo, el motor V8 de javascript en el navegador.

  • Hoisting es la forma en cómo Javascript interpreta las declaraciones que ocurren en nuestro código, para de ésta forma darle un contexto en el momento de ejecución.
  • Esto es que cuando escribimos código JS, el motor va a agarrar eso escrito y por medio de su contexto de ejecución va a realizar un Parser, un analisis de lo que está escrito.
  • Si encuentra algo mal, detiene su ejecución y devuelve el error.
  • Por lo contrario, enviará todo al AST para que, de acuerdo a su estructura, se construye un árbol de sintaxis de lo que llegó del Parser.
  • Esto se interpreta y si es necesario se optimiza, para finalmente enviarlo a que lo lea la máquina por medio del Byte Code.