Scope chain y contextos en JavaScript

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:21

Scope chain y contextos en JavaScript

Curso de Fundamentos de JavaScript

Clase 24 de 55

Clase 24 / 55

Recursos

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.

Gerardo Lara

Hace 2 años

# **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).

Comentarios (65)65 comentarios

Kevin Vargas Murcia

Pablo Luna Guzmán

Emerson Cedeño

Diego Peraza

Agustina Corvo

Hace 2 años•editado

Hector Rodriguez

Cristhian Melo

Calvin Rafael Bobadilla Fernandez

Jorge Ivan Martinez Guerra

César Martínez

Hace un año

Maricielo Anchahua Flores

EDUARDO DANIEL CORTEZ RECINOS

Hace 3 meses

Miguel Lozano

Hace 9 meses

Alejandro Sánchez Yalí

Cruz Morales Hernández

Jhony Perez

Hernán García Urrutia

Sebastián Sánchez Guadir

Hace 2 meses

Marvin René Rivera Morales

Daniel Vergel

Hace 4 meses

Victor R Vele

Hace 5 meses

Erwin Cruz

Hace 6 meses

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

Scope chain y contextos en JavaScript