JavaScript: ¿Qué es el Execution Context?
Tags: webdev, javascript, beginners, tutorial
Published: 2023-01-14 21:59:41

## **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:

```jsx
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`.

```jsx
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`.

```jsx
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`.

```jsx
/* 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 🤯🤯🤯🤯🤯🤯🤯🤯🤯

```jsx
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:

- [https://www.freecodecamp.org/news/execution-context-how-javascript-works-behind-the-scenes/](https://www.freecodecamp.org/news/execution-context-how-javascript-works-behind-the-scenes/)
- [https://medium.com/sngular-devs/comprende-js-entorno-léxico-y-el-contexto-de-ejecución-c66459f63321](https://medium.com/sngular-devs/comprende-js-entorno-l%C3%A9xico-y-el-contexto-de-ejecuci%C3%B3n-c66459f63321)

---

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! 😸