Alcance (Scope) y Hoisting
Comprende el ciclo de vida y visibilidad de las variables: alcance global, de función y de bloque, la zona muerta temporal (TDZ) y el mecanismo de elevación.
Los 3 Niveles de Alcance (Scope)
El alcance determina desde qué partes de tu código es accesible una variable determinada. En JavaScript existen tres niveles fundamentales:
| Nivel de Alcance | Dónde se declara | Visibilidad |
|---|---|---|
| Global Scope | Fuera de cualquier función o bloque. | Accesible desde cualquier línea de todo el programa. |
| Function Scope | Dentro del cuerpo de una función. | Solo visible en el interior de esa función; muere al retornar. |
| Block Scope (ES6) | Dentro de llaves { ... } con let o const. |
Solo visible dentro de ese bloque if, for o llave; no se escapa al exterior. |
Diagrama 10.1: La cadena de resolución de ámbitos (Scope Chain), persistencia de variables en Closures y la TDZ.
¿Qué es el Hoisting (Elevación)?
El motor de JavaScript analiza el código antes de ejecutarlo. El Hoisting es el comportamiento por el cual las declaraciones de funciones y variables son "elevadas" conceptualmente a la parte superior de su contexto.
- Funciones declarativas: Se elevan por completo, por lo que puedes llamar a la función antes de su línea de definición sin errores.
- Variables con
letyconst: También se elevan, pero entran en la Temporal Dead Zone (TDZ). Intentar leerlas antes de su línea de inicialización arroja un errorReferenceErrorseguro.
⚡ Demostración de Alcance de Bloque y Función
Ejecuta la prueba para comprobar cómo una variable let dentro de un if queda protegida y no contamina el entorno exterior:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Scope y Hoisting en JS</title>
<style>
body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
.card-scope { max-width: 500px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
.terminal-box { background: #0f172a; color: #38bdf8; padding: 14px; border-radius: 6px; font-family: monospace; font-size: 0.9rem; margin-top: 15px; }
</style>
</head>
<body>
<div class="card-scope">
<h3 style="margin-top: 0; color: #0f172a;">Prueba de Alcance de Bloque</h3>
<p>Observa cómo la variable interna de un bloque no sobreescribe la variable exterior:</p>
<button onclick="probarScope()" style="background: #0284c7; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: bold;">
Ejecutar Prueba de Alcance
</button>
<div id="salida-scope" class="terminal-box">
Presiona el botón para ver la ejecución...
</div>
<script>
function probarScope() {
let mensaje = "1. Variable en Scope Superior (Exterior)";
let salida = mensaje + "\n";
if (true) {
// Esta variable 'mensaje' tiene Block Scope y es completamente independiente:
let mensaje = "2. Variable interna dentro del bloque IF";
salida += mensaje + "\n";
}
// Al salir del bloque, la variable original sigue intacta:
salida += "3. Al salir del IF: " + mensaje;
document.getElementById('salida-scope').innerText = salida;
}
</script>
</div>
</body>
</html>¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?
Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.
🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.