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].
- Funciones.
- Ciclos
for y while.
- Condicionales como
if y else.
- Bloques de llaves sueltos.
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.
