JavaScript: ¿Qué es el Execution Context?

Franco Gomez — Sat, 14 Jan 2023 21:59:41 +0000

Introducción 📜

En el momento que me decidí por investigar conceptos un poco más avanzados de JavaScript me di cuenta de lo poco que conocía sobre el lenguaje hasta ese momento.
En este post describo de manera amigable qué es el Execution Context, como es su funcionamiento y para qué sirve, entre otras cosas.

¿Execution Context? 🤔

En JavaScript, el contexto de ejecución o Execution Context se refiere al entorno en donde una función o porción de código está siendo ejecutado.

Dentro del Runtime de JavaScript, cada vez que se ejecuta una función o script, se crea un nuevo contexto de ejecución que contiene información sobre las variables, funciones y objetos que están disponibles en ese momento.

Cada contexto de ejecución tiene 2 fases:

Fase de creación.
Fase de ejecución.

Fase de creación 🏗

Por ejemplo, cuando el motor de JavaScript ejecuta un script por primera vez, este crea un contexto de ejecución global. Durante fase de creación, el motor de JavaScript realiza las siguientes tareas:

Crea el objeto global, es decir, window si es en el navegador o global si es en Node.js.
Crea el objeto this y lo vincula al objeto global.
Configura la memoria para almacenar variables y referencias a funciones.
Almacena las declaraciones de funciones y variables en memoria dentro del contexto de ejecución global pero con valores iniciales como undefined.

Luego de esta fase de creación, el contexto de ejecución global pasa a la fase de ejecución.

Fase de ejecución ⚡

Durante la fase de ejecución, el motor de JavaScript ejecuta el código línea tras línea asignando los valores a las variables y ejecutando las llamadas a las funciones.

Para cada llamado a una función, el motor de JavaScript crea otro contexto de ejecución llamado function execution context.

Estos contextos son muy similares al contexto de ejecución global, pero en lugar de crear el objeto global window, el motor de JavaScript crea el objeto arguments refiriendose a los parámetros de la función.

Ejemplo 🔍

En este ejemplo voy a mostrar un pequeño código con el propósito de explicar el funcionamiento de lo anteriormente explicado:

let number = 25;

function timesTen(a){
    return a * 10;
}

let result = timesTen(number);

console.log(result); // 250

Fase de creación 🏗

En este caso, la fase de creación empezaría por crear el objeto global window seguido del objeto this para luego hacer lugar en memoria para almacenar las variables y los llamados a las funciones. Luego, empezaría por guardar las variables number y result y la declaración de timesTen() dentro del contexto de ejecución global. Por último, inicializa las variables number y result como undefined.

let number = undefined;

function timesTen(){...}

let result = undefined;

console.log(result); // 250

Fase de ejecución ⚡

Durante esta fase, el motor de JavaScript ejecuta el código línea por línea asignando los valores 25 y timesTen(number) a las variables number y result.

let number = 25;

function timesTen(){...}

let result = timesTen(number);

console.log(result); // 250

(Esto puede resultar un poco más complicado de lo normal)

Luego crea un nuevo contexto de ejecución para la función timesTen pasando una vez más por la fase de creación, en donde crea el objeto global arguments, establece this referenciando al objeto global e inicializando a como undefined.

/* Function Execution Context */
function timesTen(a){   
    // this = windows (en este caso)
    // a = undefined
    return a * 10
}

En la fase de ejecución del contexto de la función timesTen (que se encuentra dentro del contexto global) el motor de JavaScript asigna 25 al parámetro a retornando el valor 250, ahora sí, hacia el contexto de ejecución global 🤯🤯🤯🤯🤯🤯🤯🤯🤯

let number = 25;

function timesTen(a){
    return a * 10;
}

let result = timesTen(number);

console.log(result); // 250

Posibles recomendaciones 🤓

Dado que es un poco difícil de entender el funcionamiento, me tomé el trabajo de dejarles dos recursos que me fueron de gran utilidad para que puedan entender más sobre el contexto de ejecución:

Muchas gracias por llegar hasta aquí, espero que hayas comprendido lo que he escrito en este post.

Sígueme si te ha sido de ayuda! 😸

APIs: Explicando el Overfetching y Underfetching de manera amigable.

Franco Gomez — Wed, 04 Jan 2023 05:02:06 +0000

Liquid syntax error: 'raw' tag was never closed

DEV Community: Franco Gomez

JavaScript: ¿Qué es el Execution Context?

Introducción 📜

¿Execution Context? 🤔

Fase de creación 🏗

Fase de ejecución ⚡

Ejemplo 🔍

Fase de creación 🏗

Fase de ejecución ⚡

Posibles recomendaciones 🤓

Sígueme si te ha sido de ayuda! 😸

APIs: Explicando el Overfetching y Underfetching de manera amigable.