I'm just a painter who studied computer science.
Entorno lexico & Contexto de ejecucion
Entorno lexico & Contexto de ejecucion
Entorno lexico (Lexical environment)
Entorno lexico es todo el entorno que rodea donde esta escrito el codigo, por ejemplo un archivo .js es un entorno lexico.
Contexto de ejecucion (Execution context)
Cada vez que se inicia una ejecucion de una funcion por ejemplo, se genera un nuevo contexto de ejecucion, de hecho al iniciar toda la aplicacion se genera un contexto de ejecucion global, podemos pensar que esto es como un "Wrapper(o algo que envuelve)" que ayuda a manejar el codigo que se este ejecutando en un momento dado y se crea para facilitar tareas. Cada contexto de ejecucion son independientes entre si.
// This is global execution context
let name = "John";
function greeting(name) {
// This is a greeting function execution context
return "Hello " + name;
}
let fullGreeting = greeting(name);
console.log(fullGreeting);
//-> Hello John
Ahora vamos a una representacion grafica para un mejor entendimento.
function a() {
// This is a function execution context
console.log("a");
}
function b() {
// This is b function execution context
console.log("b");
a();
}
b();
//-> b a
Pila de ejecucion o llamada (Execution stack)
Pila de ejecucion o Pila de llamadas, “call stack”, es una estructura dinámica de datos LIFO que almacena información sobre las subrutinas de una aplicación. Piensalo como el lugar para llamadas de funciones, o una estructura de datos que implementa el tipo de datos de la pila (stack), en que solamente se puede ejecutar una función a la vez.
Volvamos al ejemplo anterior y mostrando en graficas como la pila de ejecucion se comporta. Cuando el motor de Javascript llega a la línea 1 crea nuestro Contexto de Ejecución y lo apila en una pila de ejecución creando un nuevo Contexto de Ejecución: «Execution Context Global«.
Cuando nuestro código llega a la línea 11 y ejecuta la funcion «b». Se crea un nuevo Contexto de Ejecución: El Contexto de Ejecución de la función «b». Nuestro actual Contexto «Execution Context Global» queda en segundo plano y el motor de Javascript pasa a crear y ejecutar el contexto de la función «b».
Recordemos que una pila funciona de la siguiente forma: El ultimo que entra es el primero que sale, y traducido a nuestros Contextos de Ejecución, el ultimo Contexto de Ejecución que entra en la pila, sera el primero en ser ejecutado. Es por eso que el motor de Javascript cambia del contexto de ejecución Global al Contexto de Ejecución de la función «b». Luego pasa lo mismo con la función «a» cuando llega a la línea que ejecuta la función a(). En nuestra pila de ejecución se crea un nuevo contexto (Execution Context de la función a) y el motor pasa a ejecutar ese contexto, dejando «en espera» al contexto anterior.
Una vez que finaliza de ejecutarse la función «a» su contexto desaparece y el motor de Javascript pasa a ejecutar el contexto «anterior», en este caso sería el Contexto de Ejecución de la función «b».
Y lo mismo al finalizar de ejecutarse la función «b», o mejor dicho su contexto, se lo saca de la pila y se ejecuta el contexto anterior; en el ejemplo, al no haber más Execution Context de ninguna función, el Contexto de Ejecución que se ejecuta es el Global.
Y para terminar, cuando este contexto finaliza, o sea cuando nuestro programa finaliza, se vacía la pila.
Fases de contexto de ejecucion
En todos los Execution Context, existen dos fases bien diferenciadas: La Fase de Creación y la Fase de Ejecución.
- Objeto global - cuando ejecutás tu código Javascript en el browser, este objeto es «window» y es un objeto que hace referencia a el browser.
- this - es una palabra reservada que hace referencia al «lugar» donde estás. El valor de «this» va cambiando dependiendo del Execution Context en que te encuentres. Como dato, en el Execution Context Global (cuando inicia tu programa), «this» es igual al objeto global «window».
- Variables y funciones - en esta etapa también se reserva espacio en memoria para TODAS las variables y funciones del código. "Hoisting", cuando te pregunten que es el "hoisting", le puedes responder 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"