EL SCOPE en JavaScript | JS en Español

El scope (ámbito o alcance) es uno de los conceptos que más confusión genera entre desarrolladores web de todo el mundo… y a la vez es una de las características más importantes de este lenguaje. Para explicarlo de forma sencilla, vamos a usar una analogía, ejemplos prácticos y el código de las imágenes que me has compartido.

📱 La analogía del celular perdido

¿Alguna vez te pasó que quisiste buscar tu celular en el bolsillo y te diste cuenta de que no lo tenías? Empieza esa voz interna: "¿dónde está mi celular?". Entras en pánico, buscas en el bolsillo, luego en los lugares cercanos… y si no lo encuentras, revisas en el resto de tu casa hasta que, si todo sale bien, lo encuentras.

JavaScript funciona exactamente igual cuando usas una variable:
Primero la busca en el entorno más cercano, y si no la encuentra, sigue buscando en entornos cada vez más lejanos hasta que encuentra un entorno donde la variable esté declarada.

Cada uno de esos entornos se llama scope (o skope). El scope es lo que le da significado a las variables y determina el conjunto de variables a las que podemos acceder desde una línea de código.

🧠 Contexto vs Scope: una confusión habitual

Antes de seguir, aclaremos algo: contexto y scope no son lo mismo.

Scope → se refiere a dónde y hasta dónde es visible una variable.
Contexto de ejecución → tiene que ver con el valor de la variable especial this (lo veremos en otro vídeo).

En JavaScript, una misma palabra puede tener distinto significado según el scope en el que nos encontremos. Por ejemplo:

function comerManzana() {
  let fruta = 'manzana';
  console.log('Comiendo ' + fruta);
}

function comerBanana() {
  let fruta = 'banana';
  console.log('Comiendo ' + fruta);
}

En comerManzana, fruta vale 'manzana'. En comerBanana, fruta vale 'banana'.
El scope es el que le da ese significado.

📦 Tipos de scope en JavaScript

Según cómo y dónde declares una variable, esta vivirá en un scope global o en un scope local. Y dentro del local tenemos dos subtipos: scope de función y scope de bloque.

🌍 Scope Global

Una variable declarada fuera de cualquier función o bloque tendrá scope global. Se puede acceder a ella desde cualquier parte del programa.

var frutaGlobal = 'manzana';   // scope global
let otraGlobal = 'pera';       // también global (pero con diferencias)
const PI = 3.1416;             // también global

Las funciones declaradas en este ámbito también son globales.

🧱 Scope de Función (function scope)

Las variables declaradas con var dentro de una función solo existen dentro de esa función. No se puede acceder a ellas desde fuera.

function comer() {
    var fruta = 'manzana';   // scope de función
    console.log('Comiendo ' + fruta);
}

comer();            // ✅ "Comiendo manzana"
console.log(fruta); // ❌ ReferenceError: fruta is not defined

🔎 Mira esta imagen (this2.png):

https://./this2.png
(En la imagen se ve la función comer() con un bloque if (true) y un console.log que usa fruta. Como fruta está declarada con var dentro de la función, tiene scope de función y puede usarse en todo el cuerpo de la función, incluso dentro del if)

🧩 Scope de Bloque (block scope)

Un bloque de código es cualquier porción delimitada por { }: el bloque de un if, un else, un while, un for, etc.
Si declaras una variable con let o const dentro de un bloque, solo existirá dentro de ese bloque.

if (true) {
    let fruta = 'manzana';
    console.log('Comiendo ' + fruta); // ✅ funciona
}
console.log(fruta); // ❌ ReferenceError

🔎 Mira esta imagen (this1.png):

https://./this1.png
(El código está fuera de toda función, pero dentro de un bloque if. Si usáramos let o const, la variable sería de bloque. Si usáramos var, sería global o de función según el contexto)

Regla clave:
var → scope de función (o global si está fuera de funciones).
let / const → scope de bloque.

⚖️ Scope global vs scope local: ¿cuál usar?

Mala práctica: abusar de variables globales.
¿Por qué? Porque hacen que las funciones dependan de cosas externas, sean impredecibles y difíciles de depurar.

Buena práctica: declarar las variables en el scope más reducido posible.

Además, las variables globales viven en memoria toda la ejecución del programa, mientras que las locales se crean y destruyen al entrar/salir de una función o bloque.

⛓️ Cadena de scopes (Scope Chain)

Cuando JavaScript necesita encontrar una variable, recorre la cadena de scopes:

Empieza en el scope más interno (donde se ejecuta el código).
Si no la encuentra, sube al scope padre.
Sigue subiendo hasta llegar al scope global.
Si al final no existe, lanza un ReferenceError.

Ejemplo con función anidada:

var fruta = 'manzana';   // scope global

function comer() {
    var fruta = 'banana'; // scope de función
    
    function lavar() {
        console.log('Lavando ' + fruta); // ¿qué fruta ve?
    }
    lavar();
}

comer(); // "Lavando banana"

Primero busca fruta dentro de lavar() (no está), luego sube a comer() (la encuentra, vale 'banana'). La variable global queda oculta en este camino.

¿Y si no usamos `var`, `let` o `const`?

Si accidentalmente escribes una variable que no existe, JavaScript la creará en el scope global (modo no estricto). Para evitarlo, usa "use strict".

"use strict";
function comer() {
    fruta = 'manzana'; // ❌ ReferenceError
}

🎭 Ocultamiento de variables (Variable Shadowing)

Cuando una variable en un scope interno tiene el mismo nombre que otra en un scope externo, la externa queda oculta (shadowed). Desde dentro solo podemos acceder a la más cercana.

var fruta = 'manzana';   // global

function comer() {
    var fruta = 'banana'; // oculta a la global
    console.log('Comiendo ' + fruta); // "Comiendo banana"
}

Si necesitamos acceder a la variable global oculta, y fue declarada con var en el navegador, podemos usar window.fruta. Con let/const globales no se agregan a window, pero igual están en el scope global (se ven en "script" en DevTools).

🛠️ Scope en el navegador (DevTools)

Puedes ver los scopes en acción usando las herramientas de desarrollo:

Abre F12 (o clic derecho → Inspeccionar).
Ve a la pestaña Sources y luego a Snippets.
Crea un nuevo snippet, pega este código (sin etiquetas <script>):

let frutaGlobal = 'manzana';

function comer() {
    let fruta = 'banana';
    if (true) {
        let fruta = 'cereza';
        debugger; // Aquí se pausa la ejecución
        console.log('Comiendo ' + fruta);
    }
}
comer();

Pon un breakpoint o ejecuta con debugger. En el panel derecho verás la sección Scope con:
- Block: fruta = 'cereza'
- Local: fruta = 'banana' (dentro de comer)
- Global o Script: frutaGlobal = 'manzana'

🔎 Mira esta imagen (this3.png):

https://./this3.png
(En esta imagen tenemos un HTML con <script> que declara var fruta = 'manzana', una función comer() que usa esa variable global, y luego la ejecuta. Como fruta es global, la función puede acceder a ella sin problemas)

🧾 Conclusión

Scope = ámbito de visibilidad de una variable.
Global: accesible desde cualquier lugar (malo si se abusa).
Local:
- De función (var) → visible en toda la función.
- De bloque (let/const) → visible solo dentro de { }.
Scope chain: búsqueda desde el ámbito más interno hacia el global.
Shadowing: una variable interna oculta a la externa con el mismo nombre.
Usa "use strict" para evitar la creación accidental de globales.

💡 Recuerda: entender el scope es esencial para escribir código predecible, mantenible y libre de bugs silenciosos.

📺 ¿Quieres seguir aprendiendo?

Si te gustó este tutorial, te invito a suscribirte al canal La cocina del código (y tocar la campanita 🔔) para no perderte los próximos vídeos sobre los 33 conceptos que todo desarrollador JavaScript debería conocer. El scope es el sexto de ellos.

¡Nos vemos en el próximo tutorial! 🚀

Tutorial basado en el contenido original de "El Scope en JavaScript" – adaptado con ejemplos prácticos y las imágenes proporcionadas.

Buscar este blog

SOTELO-javascript