Scope y Contextos de Ejecución en JavaScript

Clase 24 de 55 • Curso de Fundamentos de JavaScript

Resumen

¿Qué son los contextos de ejecución y la cadena de alcances?

Los contextos de ejecución y la cadena de alcances son conceptos fundamentales en JavaScript, ya que determinan cómo y dónde se accede a las variables dentro del código. Al usar las palabras clave var, let, y const, es esencial comprender estas diferencias: el tipo de scope y el comportamiento de hoisting. Esto nos ayudará a tomar decisiones informadas sobre cuándo y cómo utilizar cada una.

¿Por qué es importante el scope en JavaScript?

El scope es crucial porque determina el alcance y la vida útil de una variable. Con var, las variables tienen un scope a nivel de función, mientras que let y const se limitan al bloque en el que se declaran. Esta distinción es vital para evitar errores y entender cómo se ejecuta el código.

Por ejemplo, consideremos el siguiente código:

const productName = "laptop";
const price = 899;
const brand = "techCode";

function getProductInfo() {
    const productName = "smartphone";
    const price = 499;
    return `${productName} costs ${price} and is of brand ${brand}`;
}

console.log(getProductInfo());

Aquí, el console.log imprime "smartphone costs 499 and is of brand techCode". Las variables productName y price dentro de la función sobrescriben las del contexto global, mientras que brand se toma desde el exterior debido a la cadena de alcances.

¿Cómo funciona el contexto de ejecución?

En JavaScript, el contexto de ejecución puede pensarse como muñecas rusas: el contexto global es la muñeca más grande y los contextos locales son las más pequeñas dentro de ella.

Contexto global: Incluye todas las variables y código que está por fuera de funciones o bloques.
Contextos locales: Son los bloques definidos, por ejemplo, dentro de una función.

¿Cómo se determina el contexto en un código?

A través del uso de llaves { }, podemos identificar los bloques que delimitan los contextos locales. Todo lo que cae fuera de estos bloques pertenece al contexto global.

let userPoints = 80;

function evaluatePoints() {
    if (userPoints < 100) {
        console.log("Below average");
    } else {
        console.log("Above average");
    }
}

console.log(evaluatePoints());

En el código anterior:

userPoints y console.log(evaluatePoints()) forman parte del contexto global.
evaluatePoints() es un contexto local que contiene su propio flujo de ejecución.

¿Qué es el scope chain o cadena de alcances?

La cadena de alcances define cómo JavaScript encuentra las variables. Un contexto local puede acceder a variables en contexto global, pero no al revés. La búsqueda de variables funciona de adentro hacia afuera, asegurándose de que no haya acceso entre contextos locales iguales.

¿Cuándo ocurre el error 'variable no definida'?

Esto ocurre cuando un contexto local busca una variable que no existe ni localmente ni en ningún contexto superior.

const globalVariable = "global1";

function local1() {
    console.log(globalVariable); // Accede correctamente a "global1"
    console.log(localVariable); // Error: localVariable no está definida

    function local2() {
        const carrot = "🥕";
        console.log(`local2: ${carrot}`);
    }

    function local3() {
        console.log(local3Variable); // Error aquí también
    }

    local2();
    local3();
}
console.log(local1());

En este ejemplo, intentar acceder a localVariable y local3Variable en contextos que no las definen o que no tienen acceso a ellas desencadena dichos errores.

Comprendiendo los errores de variable no definida

Es importante internalizar la restricción de que los contextos iguales no pueden comunicarse entre sí sin que compartan un contexto padre donde esté definida la variable de interés. Este entendimiento permitirá evitar múltiples errores en implementaciones más complejas, asegurando un manejo eficiente de cómo y dónde se posicionan y utilizan las variables.

Motívate a seguir profundizando en estos conceptos. La práctica y comprensión de cómo JavaScript maneja el scope y los contextos de ejecución te harán un desarrollador más hábil y capaz de escribir código más eficiente y sin errores.

Kevin Vargas Murcia

student•

En JavaScript, los contextos de ejecución y la scope chain son conceptos fundamentales que permiten comprender cómo se ejecuta el código y cómo se accede a las variables.

Contexto de ejecución:

Un contexto de ejecución es un entorno en el que se ejecuta el código JavaScript. Contiene información sobre el código que se está ejecutando, como las variables declaradas, las funciones y el objeto global. Cada vez que se invoca una función, se crea un nuevo contexto de ejecución.

Scope Chain:

La scope chain es el mecanismo que utiliza JavaScript para determinar qué variables están disponibles para una instrucción en particular. Se busca en una secuencia de contextos de ejecución hasta encontrar la variable con el nombre correspondiente.

Pasos para la búsqueda en la scope chain:

Objeto de activación actual: Se busca la variable en el objeto de activación del contexto de ejecución actual.
Entorno externo: Si no se encuentra la variable en el objeto de activación actual, se busca en el entorno externo, es decir, en el contexto de ejecución padre.
Repetición: El proceso se repite hasta encontrar la variable o llegar al objeto global.
Variable no definida: Si no se encuentra la variable en ningún contexto de ejecución, se genera un error de referencia. (Que eso fue justo lo que sucedio en el ejemplo final de la clase)

Conclusiones:

Los contextos de ejecución y la scope chain son conceptos esenciales para comprender el funcionamiento del código JavaScript.
Los contextos de ejecución definen el entorno en el que se ejecuta el código, mientras que la scope chain determina qué variables están disponibles para una instrucción en particular.
La comprensión de estos conceptos es fundamental para escribir código JavaScript claro, organizado y libre de errores.

Pablo Luna Guzmán

student•

Este tema es sin duda tan fascinante como importante en JavaScript, debajo les comparto mi resumen sobre esta lección!

Emerson Cedeño

student•

resaltando por acá este importante cuadro, saludos!

Diego Peraza

student•

Me surgió una duda en todo esto. Como puedo ejecutar solo una función de una lista de funciones dentro de una función contenedora ?

Como puedo ejecutar solo la función localTwo sin que se ejecute el primer console.log ni el localThree ?

Agustina Corvo

student•

Tal como está el código, no es posible ejecutar localTwo sin que se ejecuten el primer console.log ni el localThree.

Para poder ejecutar solo la función localTwo sin ejecutar el resto, lo mejor sería extraerla de localOne, y dejar localTwo en el contexto global. Y eso se ejecutaría sin problemas, ya que localTwo no utiliza nada del contexto local de localOne. Claro que su nombre y el texto del console.log perderían algo de sentido.

La otra opción obviamente sería comentar el primer console.log y la línea que ejecuta localThree.

Diego Peraza

student•

Entonces no es posible 🤔. Me queda claro entonces que si quieres que tu funció haga algo lo mejor es escribir ese código aparte. Gracias !

Hector Rodriguez

student•

Mi ejercicio resuelto, el contexto local es lo que se encuentra dentro de las llaves y el contexto global es lo que se encuentra por fuera.

Del contexto global no se puede acceder al contexto local, pero del contexto local si se puede acceder al contexto global.

Maricielo Anchahua Flores

student•

Las arrow functions en JavaScript permiten una sintaxis más corta para definir funciones. Usan la sintaxis () => {} y no crean su propio contexto de this; en su lugar, heredan el this del contexto donde fueron definidas. Esto es especialmente útil en callbacks, donde se necesita mantener el contexto de la función padre.

Ejemplo:

const obj = {
  value: 42,
  getValue: function() {
    return () => this.value; // 'this' se refiere a 'obj'
  }
};

const func = obj.getValue();
console.log(func()); // 42

En este caso, la arrow function no tiene su propio this, por lo que se obtiene el valor de value del objeto obj.

Cristhian Melo

student•

Calvin Rafael Bobadilla Fernandez

student•

MIS APUNTES:

Jorge Ivan Martinez Guerra

student•

En JavaScript, no se pueden tener contextos locales dentro de otros contextos locales. Cada función crea su propio contexto local, pero los contextos locales no pueden anidarse. Sin embargo, desde un contexto local puedes acceder a variables de un contexto global, pero no al revés. Es como las muñecas rusas: puedes abrir y ver dentro de una muñeca, pero no puedes agregar muñecas nuevas dentro de otra muñeca del mismo tamaño. Así, cada función mantiene su propio alcance sin anidamiento adicional.

Alejandro Sánchez Yalí

student•

he creado un artefacto que ilustra varios aspectos importantes de los contextos de ejecución y la scope chain en JavaScript. Aquí están algunos puntos adicionales y observaciones sobre los ejemplos:

// Ejemplo 1: Contextos de ejecución y scope chain básicos
let globalVar = "Soy global";

function outerFunction() {
  let outerVar = "Soy outer";
  
  function innerFunction() {
    let innerVar = "Soy inner";
    console.log(innerVar);  // Accede a variable local
    console.log(outerVar);  // Accede a variable del contexto externo
    console.log(globalVar); // Accede a variable global
  }
  
  innerFunction();
}

outerFunction();

// Ejemplo 2: Closures y scope chain
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  }
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

// Ejemplo 3: Hoisting y TDZ (Temporal Dead Zone)
console.log(hoistedVar); // undefined
var hoistedVar = "Soy hoisted";

// console.log(tdz); // ReferenceError
let tdz = "Temporal Dead Zone";

// Ejemplo 4: Scope en bloques (let y const)
{
  let blockVar = "Solo visible en este bloque";
  const BLOCK_CONST = "Constante de bloque";
}
// console.log(blockVar); // ReferenceError

// Ejemplo 5: This y contextos de ejecución
const obj = {
  method: function() {
    console.log(this);
  }
};

obj.method(); // 'this' se refiere a 'obj'
const unboundMethod = obj.method;
unboundMethod(); // 'this' se refiere al objeto global (en modo no estricto)

// Ejemplo 6: Modificación del scope chain con 'with' (no recomendado)
const withObj = { x: 10, y: 20 };
with (withObj) {
  console.log(x + y); // 30
}

// Ejemplo 7: Módulos y scope
// file1.js
export const moduleVar = "Soy del módulo";

// file2.js
import { moduleVar } from './file1.js';
console.log(moduleVar);

// Notas adicionales:
// - Cada función crea su propio contexto de ejecución.
// - Los contextos de ejecución forman una pila (call stack).
// - La scope chain se crea cuando se define una función, no cuando se ejecuta.
// - Las arrow functions no crean su propio 'this', heredan el 'this' del contexto circundante.

Cruz Morales Hernández

student•

Si a algunos de ustedes les quedó un poco de duda sobre las palabras claves var, let y const. Les recomiendo mucho que lean esta guía, despejará sus dudas. 👌👌 Variables en JavaScript – Guía para principiantes sobre var, const y let

Jhony Perez

student•

Buena onda, gracias. Me sirvio mucho.

Gerardo Lara

student•

# **Scope (Ámbito) en JavaScript** El **scope** o **ámbito** determina dónde puedes acceder a una variable dentro de tu código. Dependiendo de dónde y cómo se declara una variable, su scope puede ser global, de función (local), de bloque, o del módulo. Si haces referencia a una variable, el motor de JavaScript buscará su declaración en el **entorno** más cercano, y seguirá buscando en entornos más lejanos hasta llegar a la línea de código que la **variable esté declarada**, pero no en viceversa. A este proceso se lo denomina **cadena de scope** *(scope chaining)*. ## **Tipos de Scope en JavaScript** 1. **Scope Global**: - Las variables declaradas fuera de cualquier función o bloque tienen un ámbito global. - Las variables globales son accesibles desde cualquier parte del código, incluidos dentro de funciones y bloques. jsx javascriptCopiar código *let* globalVar = "Soy global"; *function* mostrarGlobal() { console.log(globalVar); // "Soy global" } mostrarGlobal(); console.log(globalVar); // "Soy global" 2. **Scope de Función (Local)**: - Las variables declaradas dentro de una función tienen un ámbito local, es decir, sólo son accesibles dentro de esa función. - No se puede acceder a estas variables fuera de la función. jsx javascriptCopiar código *function* mostrarLocal() { *let* localVar = "Soy local"; console.log(localVar); // "Soy local" } mostrarLocal(); console.log(localVar); // Error: localVar no está definida 3. **Scope de Bloque**: - Con la introducción de let y const en ES6, las variables pueden tener un ámbito de bloque. - Las variables declaradas con let o const dentro de un bloque ({}) sólo son accesibles dentro de ese bloque. jsx javascriptCopiar código if (true) { *let* blockVar = "Soy un bloque"; console.log(blockVar); // "Soy un bloque" } console.log(blockVar); // Error: blockVar no está definida 4. **Scope de Módulo** (ES6 y posteriores): - En el contexto de los módulos de JavaScript (archivos .js importados/exportados), las variables declaradas en un módulo tienen un ámbito de módulo. - No son accesibles fuera del módulo a menos que se exporten. jsx javascriptCopiar código // modulo1.js *let* moduloVar = "Soy un módulo"; export default moduloVar; // main.js import moduloVar from './modulo1.js'; console.log(moduloVar); // "Soy un módulo" ### **Hoisting y Scope** - **Hoisting**: Es el comportamiento de JavaScript donde las declaraciones de variables y funciones se mueven "arriba" de su scope antes de la ejecución del código. Esto significa que puedes usar variables y funciones antes de declararlas, aunque su valor será undefined si son variables. jsx javascriptCopiar código console.log(x); // undefined *var* x = 10; - En el caso de let y const, aunque son hoisted, no se pueden utilizar antes de su declaración debido a lo que se llama "zona temporalmente muerta" (Temporal Dead Zone, TDZ).

David Rangel

student•

// Ejemplo 3

// checkAccess tiene acceso a la variable global de userPoints = 150, el mensaje esperado es "Access granted.."

David Rangel

student••

// Ejmplo 2

// The Smarthphone costs 499 and is from the brand TechCo

Y lo hace porque no conoce las variables declaradas en la función, la función de hecho no es ejecutada. Las variables que conoce son las que están fuera de la función.