Cargando...

Ámbito (scope)

Ya sabes declarar variables, escribir funciones y devolver valores. Otra regla decide si un nombre es alcanzable: el ámbito (scope). Responde: «desde aquí, ¿qué nombres puedo usar?»

Qué significa el ámbito

El ámbito es la zona del programa donde existe un nombre. Fuera, la misma escritura puede ser invisible — o apuntar a otro enlace. Piensa en habitaciones: una etiqueta en la cocina se ve en la cocina; no aparece sola en la calle.

Tres tipos cotidianos

📊 Ámbito global, de función y de bloque

Tipo Dónde vive el nombre Herramientas típicas ¿Dónde se ve?
global fuera de toda función let / const / var al nivel superior en todo el script (misma página)
función (local) dentro del cuerpo parámetros y locales solo dentro de esa función
bloque dentro de { } como if o bucle let y const solo dentro de ese bloque

Estos tres cubren la mayor parte del código principiante. Los locales de función siguen privados. Los enlaces de bloque con let y const se quedan entre llaves. Los globales se comparten — útiles para un contador común, riesgosos si todo se vuelve global.

Un nombre global

javascript 
let city = "Tehran";
function showCity() {
console.log(city);
}
showCity();
console.log(city);

Los globales viven fuera de las funciones

city se declara en el nivel superior, así que la función y el console.log posterior lo leen. Cambia la cadena una vez; cada lector ve el valor nuevo. Prefiere globales solo cuando varias partes comparten de verdad un valor.

Un nombre local dentro de una función

javascript 
function greet() {
let message = "Hello";
console.log(message);
}
greet();
// console.log(message); // Error: message is not defined

Los locales se quedan en la función

message existe solo mientras corre greet. Fuera, ese nombre no está definido. Los parámetros igual: locales a la función que los lista.

Ámbito de bloque con let

javascript 
if (true) {
let score = 10;
console.log(score);
}
// console.log(score); // Error: score is not defined

let y const respetan los bloques

Dentro de { }, un let o const solo se ve en ese bloque. Tras la llave de cierre, score desaparece. El var antiguo es de función y puede «filtrarse» del bloque. Prefiere let y const para que el borde del bloque signifique lo que parece.

El código anidado lee hacia afuera

javascript 
let title = "Shop";
function show() {
let label = "open";
console.log(title + " is " + label);
}
show();

Lo anidado mira hacia afuera

show lee el title exterior y su propio label. La búsqueda va hacia afuera hasta hallar coincidencia. No hacia adentro: el código exterior no ve un nombre nacido solo dentro de la función.

El nombre interno sombrea al externo

javascript 
let status = "ok";
function check() {
let status = "busy";
console.log(status);
}
check();
console.log(status);

Sombreado: dentro gana el interno

Dentro de check, el status local oculta al externo. La llamada imprime busy. Al terminar, el externo sigue ok. Misma escritura, dos enlaces — el ámbito decide cuál tocas.

Mostrar un valor con ámbito en la página

Guarda una etiqueta global, construye en una función una línea que aún pueda leerla y escribe el resultado en un párrafo.

Demo de página con ámbito

html 
<!DOCTYPE html>
<html>
<head>
<title>scope — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
let place = "Garden";
function line() {
let state = "open";
return place + " is " + state;
}
let box = document.getElementById("msg");
box.textContent = line();
</script>
</body>
</html>

El párrafo muestra Garden is open. place es global; state es local a line. La función lee ambos, devuelve una cadena y la página la muestra. Cambia solo place, actualiza y lee la línea. Siguiente: closures — funciones que mantienen nombres exteriores vivos tras terminar la llamada exterior.

Pasos de práctica

  1. Declara un let app = "demo" global y regístralo desde una función pequeña y desde fuera.
  2. Pon let secret = 1 dentro de una función; confirma que registrar secret fuera lanza error.
  3. Dentro de if (true) { } declara let n = 5 y regístralo; prueba después del bloque.
  4. Desde una función anidada lee un let exterior sin redeclararlo.
  5. Sombrea let tag = "A" exterior con let tag = "B" interior y registra ambos sitios.
  6. En la demo HTML cambia solo la cadena place, actualiza y lee el párrafo.

Errores frecuentes

  • Usar un local fuera de su función — ReferenceError, no un vacío silencioso
  • Esperar que var en un bloque se quede privado como let
  • Suponer que el código exterior ve nombres nacidos solo dentro de una función anidada
  • Mezclar ámbito con return — uno es visibilidad; el otro envía un valor
  • Esperar aquí la lección completa de closures — eso es la página siguiente

Resumen

  • El ámbito es dónde se ve y usa un nombre
  • Los globales viven fuera de las funciones y se comparten en el script
  • Locales y parámetros se quedan en su función
  • let y const dentro de { } son de bloque; mejor que un var que filtra
  • Lo anidado puede leer hacia afuera; afuera no ve nombres solo internos
  • Un enlace interno con el mismo nombre sombrea al externo
  • La página puede combinar global y local en una cadena devuelta
  • Siguiente: closures — funciones que recuerdan nombres exteriores

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 31 de 31
Javascript Tutorial