Scope


¿Qué es el Scope?

El scope (o ámbito) es el contexto en el que una variable existe y puede ser accedida. Determina qué partes del código “ven” esa variable y cuáles no. En JavaScript existen tres tipos principales: global, de función y de bloque.

¿Para qué se utiliza?

Entender el scope sirve para:

  • Evitar conflictos entre variables con el mismo nombre en distintas partes del código.
  • Controlar la visibilidad y el ciclo de vida de las variables.
  • Prevenir bugs causados por variables globales que se modifican accidentalmente.
  • Entender cómo funcionan los closures y el hoisting.
  • Escribir código más predecible y fácil de depurar.

¿Cómo funciona?

Imagina el scope como puertas de una casa. Las variables globales son muebles en el salón — todos los acceden. Las variables de función son objetos dentro de un armario — solo quien está dentro del armario los ve. Las de bloque son cajones dentro de ese armario — más limitados todavía. Desde dentro siempre puedes ver hacia afuera, pero no al revés.

Ejemplo: Los tres tipos de scope

// 1. SCOPE GLOBAL — accesible desde cualquier sitio
const appNombre = 'MiApp';

function saludar() {
  console.log(appNombre); // ✅ Accede al scope global
}

// 2. SCOPE DE FUNCIÓN — solo dentro de la función
function calcular() {
  const resultado = 42; // Solo existe dentro de calcular()
  console.log(resultado); // ✅ Accesible
}

console.log(resultado); // ❌ ReferenceError: resultado is not defined

// 3. SCOPE DE BLOQUE — solo dentro de {} con let/const
if (true) {
  let mensajeBloque = 'Hola desde el bloque';
  const pi = 3.14;
  var antiguoVar = 'yo me escapo'; // var ignora los bloques

  console.log(mensajeBloque); // ✅ Accesible
}

console.log(mensajeBloque); // ❌ ReferenceError
console.log(pi);            // ❌ ReferenceError
console.log(antiguoVar);    // ✅ Accesible — var no tiene scope de bloque

Ejemplo: Scope y var vs let

// var: scope de función, se "escapa" de los bloques
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Imprime: 3, 3, 3 — todas las callbacks ven la misma 'i'

// let: scope de bloque, cada iteración tiene su propia 'i'
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 100);
}
// Imprime: 0, 1, 2 — cada callback captura su propia 'j'

El scope es la base para entender algunos de los bugs más comunes en JavaScript. Preferir let y const sobre var es una de las prácticas más sencillas para evitar comportamientos inesperados.