Cúal es el alcance o el ámbito de las variables en JavaScript

Resumen: en este tutorial, aprenderás sobre el alcance o el ámbito de las variables en JavaScript que determina la visibilidad y accesibilidad de las variables.

¿Qué es el alcance o ámbito de las variables?

El alcance o el ámbito determina la visibilidad y accesibilidad de una variable.

JavaScript tiene tres ámbitos:

•      Ámbito global
•      Ámbito local
•      Ámbito de bloque (comenzado desde la ES6)

El ámbito global

Cuando el motor de JavaScript ejecuta un script, crea un contexto de ejecución global.

Además, también asigna variables que declaras fuera de las funciones al contexto de ejecución global. Estas variables están en el ámbito global. También se conocen como variables globales.

Observemos el siguiente ejemplo:

var mensaje = 'Hola';

La variable mensaje tiene un alcance global. Puede ser accesible en cualquier parte del script.

Ámbito local

Las variables que se declaran dentro de una función son locales y estan disponibles solamente en la función. Se llaman variables locales. Por ejemplo:

var mensaje = 'Hola';

function saludar() {
    var mensaje = 'Bienvenido';
    console.log(mensaje);
}

saludar();
console.log(mensaje);

Resultado:

Bienvenido
Hola

Cuando el motor de JavaScript ejecuta la función saludar(), crea un contexto de ejecución de función. La variable mensaje declarada dentro de la función saludar() está vinculada al contexto de ejecución de la función, no al contexto de ejecución global.

Cadena de alcance

Considera el siguiente ejemplo:

var mensaje = 'Hola';

function saludo() {
    console.log(mensaje);
}

saludo();

Resultado:

Hola

En este ejemplo, hacemos referencia a la variable mensaje dentro de la función saludo(). Detrás de escena, JavaScript realiza lo siguiente:

• Busca la variable mensaje en el contexto actual (contexto de ejecución de la función) de la función saludo(). En este caso no puede encontrar ninguno.
• Busca la variable mensaje en el contexto de ejecución externo, que es el contexto de ejecución global. Encuentra la variable mensaje.

La forma en que JavaScript resuelve una variable es mirándola en su ámbito actual, si no puede encontrar la variable, sube al ámbito externo, a esto se le denomina cadena de alcance.

Más ejemplo de cadena de alcance

Considera el siguiente ejemplo:

var y = 20;

function bar() {
    var y = 200;

    function baz() {  
        console.log(y);
    }

    baz();
}

bar();

Resultado

200

En este ejemplo:

• Primero, el motor de JavaScript busca la variable en el ámbito de la función baz(). En este caso no puede encontrar la variable. Así que sale de este ámbito.
• Luego, el motor de JavaScript busca la variable en la función bar(). Aquí si encuentra la variable y deja de buscar.

Fugas de variables globales: la parte extraña de JavaScript

Veamos el siguiente ejemplo:

function getCounter() {
    contador = 10;
    return contador;
}

console.log(getCounter());

Resultado:

10

• En este ejemplo, asignamos 10 a la variable contador sin la palabra clave var, let o const y luego lo devolvimos.
• Fuera de la función, llamamos a la función getCounter() y mostramos el resultado en la consola.

Este problema se conoce como fugas de las variables globales.

• Por detras, el motor de JavaScript primero busca la variable contador en el ámbito local de la función getCounter(). Debido a que no hay palabra clave var, let o const, la variable contador no está disponible en el ámbito local. No ha sido creada.
• Luego, el motor de JavaScript sigue la cadena de alcance y busca la variable contador en el alcance global. El ámbito global tampoco tiene la variable contador, por lo que el motor de JavaScript crea la variable contador en el ámbito global.

Para arreglar este comportamiento "raro", usa el ' use strict' en la parte superior del script o en la parte superior de la función:

'use strict'

function getCounter() {
    contador = 10;
    return contador;
}

console.log(getCounter());

Ahora el código marca un error:

ReferenceError: contador is not defined

A continuación se muestra cómo usar el 'use strict' en la función:

function getCounter() {
    'use strict'
    contador = 10;
    return contador;
}

console.log(getCounter());

Ámbito de bloque

ES6 proporciona las palabras clave let y const que permiten declarar variables en el alcance del bloque.

Generalmente, cada vez que veas corchetes {}, es un bloque. Puede ser el área dentro de las condiciones if, else, switch o for, do while y while.

Veamos el siguiente ejemplo:

function saludo(mensaje) {
    if(!mensaje) {
        let saludar = 'Hola'; // Ámbito de bloque
        console.log(saludar);
    }
    // saludar de nuevo?
    console.log(saludar); // ReferenceError
}

saludo();

En este ejemplo, hacemos referencia a la variable saludar fuera del bloque if que genera un error.

En este tutorial, aprendiste sobre los ámbitos de las variables de JavaScript, incluido el ámbito de la función, el ámbito global y el ámbito del bloque.