En JavaScript, el ámbito se refiere al alcance o visibilidad de las variables y funciones. Determina dónde pueden ser accedidas y cuándo existen durante la ejecución del programa. A diferencia de otros lenguajes, JavaScript utiliza funciones para definir los ámbitos, no las llaves de bloque.

for (let contador = 0; contador < 5; contador++){
    var miTexto = "Hola mundo";
    console.log(contador); 
}
alert(miTexto);//Muestra "Hola mundo"

Este código funciona correctamente en JavaScript, pero en otros lenguajes provocaría un error. Esto se debe a que el ámbito en JavaScript está basado en funciones, no en bloques de código.

Existen dos tipos principales de ámbito: el ámbito global y el ámbito local.

El ámbito global puede ocurrir en tres situaciones:

1. Variables y funciones definidas en el nivel más externo:

var mensajeGlobal = "Variable global";
function saludar(){
    console.log("¡Hola desde una función global!");
}

La variable mensajeGlobal y la función saludar() tienen alcance global y pueden ser accedidas desde cualquier parte del código.

2. Variables no declaradas explícitamente:

function procesarDatos(){
    var local = valor = 10;
    texto = "Asignación sin declarar";
    console.log(texto);
}
procesarDatos();
alert(valor);

La variable texto no fue declarada con var, por lo que se convierte en una variable global, incluso dentro de la función. Un caso容易被忽略 es la variable valor, que parece estar declarada con var, pero en realidad solo se aplica a local. Es equivalente a:

function procesarDatos(){
    var local = (valor = 10); // Asignación de derecha a izquierda
    texto = "Asignación sin declarar";
    console.log(texto);
}

Es una buena práctica minimizar el uso de variables globales en un archivo JavaScript. La mejor práctica es siempre declarar variables con var y asignarles un valor en el momento de la declaración.

function configurar(){
    var x = 0, y = 1, z = 2; // Equivalente a tres declaraciones separadas
}
configurar();
alert(z); // Error, z es una variable local

3. Objeto global window:

var miVariable = "Valor global";
console.log(miVariable);
console.log(window.miVariable);
console.log(window["miVariable"]);
console.log(this.miVariable);
console.log(this["miVariable"]);// this se refiere a window en este contexto

Todas las variables globales son propiedades del objeto global window y pueden ser accedidas de las formas mostradas anteriormente.

Las variables locales solo existen en un escenario: cuando se declaran dentro de una función.

function mostrarMensaje(){
    var textoLocal = "Mensaje local";
    console.log(textoLocal);
}
mostrarMensaje();
console.log(textoLocal); // Error, la variable no está definida en este ámbito

Curiosidad técnica:

En el ámbito global, hay una diferencia entre declarar una variable con y sin var. Las variables declaradas con var no pueden ser eliminadas, mientras que las no declaradas sí.

const constante = "Valor constante";
variableGlobal = "Variable global";
delete constante;
delete variableGlobal;
console.log(constante);  // "Valor constante"
console.log(variableGlobal); // Error, fue eliminada

La cadena de alcance busca variables desde adentro hacia afurom. Si se encuentra una variable en un ámbito interno, la búsqueda se detiene. Si no se encuentra, se continúa buscando en ámbitos superiores hasta llegar al ámbito global, donde si no se encuentra la varialbe, se devuelve undefined.

var alcanceExterno = "Valor externo";
function demostrarAlcance(){
    var alcanceInterno = "Valor interno";
    console.log(alcanceInterno); //"Valor interno"
}
demostrarAlcance();

En el ejemplo anterior, la cadena de alcance encuentra primero la variable alcanceInterno dentro de la función y utiliza ese valor, deteniendo la búsqueda.

Punto común de error:

var variableAmbito = "Valor original";
function pruebaAlcance(){
    console.log(variableAmbito); // undefined
    var variableAmbito = "Valor nuevo";
    console.log(variableAmbito); //"Valor nuevo"
}
pruebaAlcance();

Las declaraciones de variables se "elevan" al principio de su ámbito actual, un comportamiento conocido como elevación de variables (hoisting). El código enterior es equivalente a:

var variableAmbito = "Valor original";
function pruebaAlcance(){
    var variableAmbito;
    console.log(variableAmbito); // undefined
    variableAmbito = "Valor nuevo";
    console.log(variableAmbito); //"Valor nuevo"
}
pruebaAlcance();

Es importante recordar que la elevación ocurre cuando la función se define, no cuando se ejecuta:

var variableAmbito = "Valor original";
function funcion1(){  
    console.log(variableAmbito);
}
function funcion2(){ 
    var variableAmbito = "Valor nuevo"; 
    funcion1();
}
funcion2(); // "Valor original"

Como se muestra, cuando funcion2() llama a funcion1(), la búsqueda de variableAmbito comienza en el ámbito de funcion1(). Si no se encuentra, continúa en el ámbito padre. La relación de anidación de ámbitos se establece en el momento de la definición de las funciones, no durante su ejecución.