Alcance (Scope) - Tutorial de Introducción a la Programación

Resumen Rápido

El alcance controla dónde se puede acceder a una variable. let y const tienen alcance de bloque, mientras que var tiene alcance de función. Entender el alcance previene errores donde las variables se sobrescriben inesperadamente o no son accesibles donde las necesitas.

Entendiendo el Alcance

El alcance determina dónde en tu código una variable es accesible. Piénsalo como habitaciones en una casa — una variable en una habitación no está automáticamente disponible en otra.

Alcance Global

Variables declaradas fuera de cualquier función o bloque:

const globalVar = "I'm everywhere!";

function test() {
  console.log(globalVar); // Accessible
}

Alcance de Función

Variables declaradas dentro de una función:

function myFunction() {
  const localVar = "Only in this function";
  console.log(localVar); // Works
}

console.log(localVar); // Error! Not defined

Alcance de Bloque (let y const)

Variables declaradas dentro de cualquier bloque {}:

if (true) {
  const blockVar = "Only in this block";
  let anotherBlock = "Also block-scoped";
}
console.log(blockVar); // Error! Not defined

var tiene Alcance de Función (No de Bloque)

Esta es la razón por la que evitamos var:

if (true) {
  var leaky = "I escape blocks!";
}
console.log(leaky); // Works (but shouldn't!)

Cadena de Alcance

Los alcances internos pueden acceder a los externos:

const outer = "outer";

function parent() {
  const middle = "middle";

  function child() {
    const inner = "inner";
    console.log(outer);  // ✓ Can access
    console.log(middle); // ✓ Can access
    console.log(inner);  // ✓ Can access
  }
}

Sombreado de Variables

Una variable del alcance interno "oculta" la externa:

const name = "Global";

function test() {
  const name = "Local"; // Shadows global
  console.log(name);    // "Local"
}

console.log(name); // "Global"

Closures (Clausuras)

Las funciones "recuerdan" su alcance:

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2

Pruébalo Tú Mismo

Aquí tienes un ejemplo práctico que puedes probar. Copia este código y ejecútalo en la consola de tu navegador (presiona F12 para abrir las herramientas de desarrollo) o en el Playground de Código.

// Global scope
const appName = "MyApp";

function demonstrateScope() {
  // Function scope
  const functionVar = "Only in this function";

  if (true) {
    // Block scope
    const blockVar = "Only in this block";
    let anotherBlockVar = "Also block-scoped";

    console.log(appName);      // ✓ Global accessible
    console.log(functionVar);  // ✓ Function accessible
    console.log(blockVar);     // ✓ Block accessible
  }

  // console.log(blockVar); // Error! Out of scope
  console.log(functionVar);   // ✓ Still in function scope
}

// Variable shadowing
const status = "global";

function checkStatus() {
  const status = "local"; // Shadows global
  console.log(status);    // "local"
}

checkStatus();
console.log(status); // "global" (unchanged)

// Closure example
function createMultiplier(factor) {
  return function(number) {
    return number * factor; // "remembers" factor
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);
console.log(double(5)); // 10
console.log(triple(5)); // 15

Puntos Clave

✓Las variables existen en bloques o funciones específicas.
✓Practica con ejemplos de código reales para solidificar tu comprensión
✓Este concepto construye la base para temas más avanzados