Comprende JS: Entorno léxico y el contexto de ejecución.
Parte II de la serie Comprende JS
¿Partes raras?, depende para quien.
Muchos de nosotros hemos oído hablar de las “partes raras” de Javascript pero, ¿realmente son raras?, bueno eso depende del programador. Anteriormente en un articulo que escribí llamado Wat the JS, hice una reseña acerca de un video, donde se exhibe algunas de esas “partes raras” y aparentemente son ilógicas, sin sentido, pero lo dejan de ser hasta que conoces la razón de ser esos resultados.
Nota: recomiendo ver el articulo mencionado antes de continuar, en caso de no haber visto dicho articulo.
Para ello comencemos con conocer el “undeerhood” de JS, no sin antes mencionar que muchos de los conceptos que veremos suenan mas difíciles de lo que realmente significan.
Entorno léxico (Lexical environment).
El lado conceptual de esto podría resumirse que es donde esta puesto un código, es decir todo el entorno que rodea donde esta escrito el código.
Tomando eso como referencia entonces podemos decir que un archivo .js es un entorno léxico.
Contexto de ejecución (Execution context).
La concepción de esto es el entorno léxico actual donde se está ejecutando el código.
Cada vez que iniciamos una ejecución de función por ejemplo, se genera un nuevo contexto de ejecución, de hecho al iniciar se genera un contexto de ejecución global y cada contexto de ejecución son independientes entre si.
Objeto global (Global object) window y this.
En el caso de una aplicación web, nuestro objeto global creado inicialmente en contexto de ejecución global es window y para representar en dicho contexto a este objeto, se crea el objeto this
Corre el ejemplo de abajo y revisa la consola, al comparar window con this resulta true.
Fases
El contexto de ejecución cuenta con dos fases, creación y ejecución, en estas fases es donde sucede la declaración de variables en memoria entre otras cosas, sin embargo si no entendemos estas fases, es probable que se te dificulte predecir el siguiente código:
Cuando en algunas entrevistas me preguntan que es el “hoisting”, les respondo que realmente la palabra “hoisting” es solo para representar al proceso de escritura de variables en memoria, pero realmente no existe, solo es un identificador para ese proceso, no hay nada escrito en el código de Javascript engine que indique esto es el “hoisting”.
Bien pues empecemos por explicar la primera fase.
Fase de creación
Es la primera fase del contexto de ejecución y es aquí donde:
- Se crea el objeto global (ej:
window). - Se el objeto y palabra reservada
thispara representar el contexto de ejecución en curso. - Se crean espacios en memoria para colocar variables y
functions statements“Hoisting”.
Fase de ejecución
En esta fase es donde se ejecuta el código del contexto en discusión linea por linea y es justo en ese proceso donde trata de identificar en memoria todas las functions statements declaradas anteriormente en memoria y coloca los valores de cada variable declarada en memoria, es por ello que fallo el código anterior, ya que las functions statements se colocan enteras en la memoria a diferencia de una function expression que solo se declara en memoria su espacio y nombre pero no sabes en ese momento que es, hasta que la fase de ejecución lea linea por linea y asigne el valor a dicha variable.
Pila de ejecución (Execution stack).
Para continuar, consideremos el siguiente código:
Bien, cuando hablamos de ejecución de función, nos estamos refiriendo a invocación o en ingles invocation, en Javascript la invocación se hace por medio de () paréntesis.
Pero que sucede cuando realizamos una invocación a una función, bueno, cuando se ejecuta o invoca una función se crea un nuevo contexto de ejecución y se agrega a la pila de ejecución, tal y como lo vemos en el código de ejemplo anterior y cuando termina de ejecutar dicha función su contexto de ejecución simplemente desaparece de la pila de ejecución, cuando finalmente termina de ejecutarse las funciones invocadas se van eliminando de la pila de ejecución sus contextos de ejecución y cuando queda el contexto global y termina de ejecutarse, también desaparece de la pila de ejecución.
Conclusión
Cuando comprendemos como funciona el contexto de ejecución y la propia pila de ejecución, comprendemos primero, que Javascript es síncrono y en segundo termino, puedes mandar al carajo a quien te quiera tomar el pelo con sus preguntitas “capciosas” como:
Si te sigue interesando la serie, espera pronto habrá mas.
