Emerson Cedeño
resaltando por acá este importante cuadro, saludos!
Entender los contextos de ejecución y el scope chain en JavaScript es lo que te permite predecir qué valor toma una variable cuando tu código corre. Si trabajas con var, let o const, dominar este tema evita errores silenciosos y comportamientos inesperados.
La idea base es simple: cada variable vive en un alcance, y ese alcance decide quién puede leerla. A partir de ahí, todo lo demás cae por su propio peso.
¿Por qué importan var, let y const en el scope?
Las tres palabras clave declaran variables, pero no son intercambiables. Sus diferencias en scope, hoisting, reasignación y redeclaración son las que te obligan a elegir una u otra según el caso [0:14].
var tiene scope de tipo function.let tiene scope de tipo block.const también tiene scope de tipo block, y además no permite reasignación.Cuando declaras una variable estás escribiendo lo que va al lado izquierdo del =, y cuando la asignas estás definiendo lo que va al lado derecho. Esa separación importa porque marca el momento exacto en que el motor de JavaScript reserva el espacio y le da un valor.
¿Qué es el scope en JavaScript? Es el área del código donde una variable existe y puede ser usada. Si una variable se declara dentro de una función, vive ahí dentro. Si se declara fuera, vive en el contexto global.
¿Cómo funcionan los contextos de ejecución?
La mejor analogía son las muñecas rusas: una muñeca grande guarda muñecas más pequeñas adentro [4:36]. El contexto global es la muñeca grande y los contextos locales son las funciones o bloques que viven dentro.
Mira este ejemplo con tres variables globales y una función que declara las suyas propias:
javascript const productName = "smartphone"; const price = 599; const brand = "Tech Co.";
function getProductInfo() {
const productName = "laptop";
const price = 899;
return The ${productName} costs ${price} from ${brand};
}
console.log(getProductInfo());
La salida es The laptop costs 899 from Tech Co. [2:34]. ¿Por qué? Porque dentro de la función se priorizan las variables locales (productName y price), pero brand no existe ahí, así que el motor sale a buscarla al contexto global.
Ahora cambia solo el console.log para que no ejecute la función, sino que use directamente las variables:
javascript
console.log(The ${productName} costs ${price} from ${brand});
La salida ahora es The smartphone costs 599 from Tech Co. [3:42]. La función queda completamente ignorada porque nunca se invoca, y el console.log solo ve las variables del contexto global.
¿Qué cuenta como un bloque en JavaScript?
Un bloque es cualquier estructura que abre y cierra con llaves {}. Ahí es donde nace un contexto local [7:12].
for y while.if y else.Cada uno de estos crea su propio espacio donde let y const viven aisladas del exterior.
¿Cómo se forma el scope chain o cadena de alcances?
El scope chain es la ruta que sigue JavaScript para encontrar una variable cuando no la halla en su contexto inmediato. Va de adentro hacia afuera, nunca al revés [8:11].
Desde un contexto local sí puedes acceder a variables del contexto global. Desde el contexto global no puedes acceder a variables locales. Esa es la regla de oro.
¿Qué es el scope chain? Es la cadena de búsqueda que hace JavaScript: primero mira en el bloque actual, luego en el bloque que lo contiene, y así hasta llegar al contexto global.
Mira este caso con funciones anidadas para verlo claro:
javascript const globalVariable = "globalOne 😊";
function localOne() { console.log(globalVariable); // console.log(localVariable); // ReferenceError
function localTwo() { const carrot = "🥕"; console.log("localTwo", carrot); }
function localThree() { console.log("localThree", carrot); // error }
localTwo(); localThree(); }
console.log(localOne());
Cuando ejecutas esto, localTwo imprime su zanahoria sin problema porque carrot vive en su propio scope. Pero localThree falla: busca carrot en su scope, no la encuentra, sube a localOne, tampoco está, sube al contexto global, y como tampoco existe ahí, lanza un error [11:08].
¿Por qué dos funciones hermanas no comparten variables?
Porque están al mismo nivel del scope chain. localTwo y localThree son dos muñecas del mismo tamaño dentro de localOne. Solo pueden mirar hacia arriba (su contenedor), nunca hacia los lados [12:38].
¿Puede una función acceder a variables de otra función al mismo nivel? No. Funciones hermanas no comparten scope. Cada una solo ve sus variables internas y las del contexto que las contiene.
Esta lógica te da una herramienta poderosa: puedes encapsular variables dentro de una función sabiendo que nadie afuera podrá tocarlas, y al mismo tiempo aprovechar las variables globales sin tener que pasarlas como argumento.
Cuéntame en los comentarios qué ejemplo te resultó más claro y si te esperabas el error de localThree al buscar la zanahoria.
Emerson Cedeño
resaltando por acá este importante cuadro, saludos!
Diego Peraza
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
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
Entonces no es posible 🤔. Me queda claro entonces que si quieres que tu función haga algo lo mejor es escribir ese código aparte. Gracias !
Hector Rodriguez
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.
Cristhian Melo
Calvin Rafael Bobadilla Fernandez
MIS APUNTES:
Jorge Ivan Martinez Guerra
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.
César Martínez
El hoisting en JavaScript se refiere a cómo las declaraciones de variables y funciones son movidas a la parte superior de su contexto de ejecución antes de que se ejecute el código. Aquí tienes un ejemplo:
console.log(myVar); // undefined var myVar = 5; console.log(myVar); // 5
En este código, la declaración var myVar es "elevada" al inicio, por lo que el primer console.log no lanza un error, pero muestra undefined porque la asignación myVar = 5 aún no se ha realizado.
Maricielo Anchahua Flores
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.
EDUARDO DANIEL CORTEZ RECINOS
Me encantan estas clases porque explican muy bien no lo dije en los primeros videos porque le estaba prestando antención pero muchas gracias por darme buenas explicaciones
Miguel Lozano
El contexto global incluye userPoints y el console.log final. El contexto local es todo lo que está dentro de las llaves de la función, incluyendo condicionales como el if.
Alejandro Sánchez Yalí
Cruz Morales Hernández
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
Buena onda, gracias. Me sirvio mucho.
Gerardo Lara
# **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).
Hernán García Urrutia
En rojo coloqué lo que es contexto local y en azul lo global
Sebastián Sánchez Guadir
02 contextos locales y 02 contextos globales... ?¡ si es Asi ?
Marvin René Rivera Morales
Espero les sea de utilidad 🥳
Daniel Vergel
Victor R Vele
Es lo que pude hacer de lo que entendi
Erwin Cruz
Por lo que entendi, los contexti de ejecucion es un entorno en el que se ejecuta un fragmento del codigo, y el alcance que tiene cada variable, a mi manera de ver, si quieres establecer variables globales fijas seria mejor usar var directamente ya que su alcance lega a funcion
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.