Ámbito de las variables en JavaScript

Variables Locales y Variables Globales

Se le llama ámbito de las variables al lugar donde estas están disponibles. Por lo general, cuando declaramos una variable hacemos que esté disponible en el lugar donde se ha declarado, esto ocurre en todos los lenguajes de programación y como Javascript se define dentro de una página web, las variables que declaremos en la página estarán accesibles dentro de ella. En Javascript no podremos acceder a variables que hayan sido definidas en otra página. Por tanto, la propia página donde se define es el ámbito más habitual de una variable y le llamaremos a este tipo de variables globales a la página. Veremos también que se pueden hacer variables con ámbitos distintos del global, es decir, variables que declararemos y tendrán validez en lugares más acotados.

Si se declara una variable en una función y se declara otra variable con el mismo nombre en el cuerpo del programa, estas dos variables, aunque tengan el mismo nombre, se consideran como dos variables diferentes.

declarar variables de diferente ámbito no es lo mas aconsejable ya que puede traer muchas confusiones, esto lo hago con fines didácticos

Variables Locales

Observe el siguiente ejemplo:

<!doctype html>
<html lang="es">
    <head>
        <title>Alcance de Variables</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <script type="text/javascript">
            function miFuncion() {
              var mensaje = "Mensaje de prueba";
            }
            alert(mensaje);
        </script>
    </body>
</html>

El ejemplo anterior define en primer lugar una función llamada miFuncion() que crea una variable llamada mensaje. A continuación, se ejecuta la función mediante la llamada miFuncion(); y seguidamente, se muestra mediante la función alert() el valor de una variable llamada mensaje.

Sin embargo, al ejecutar el código anterior no se muestra ningún mensaje por pantalla. La razón es que la variable mensaje se ha definido dentro de la función miFuncion() y por tanto, es una variable local que solamente está definida dentro de la función.

Cualquier instrucción que se encuentre dentro de la función puede hacer uso de esa variable, pero todas las instrucciones que se encuentren en otras funciones o fuera de cualquier función no tendrán definida la variable mensaje. De esta forma, para mostrar el mensaje en el código anterior, la función alert() debe llamarse desde dentro de la función miFuncion():

<!doctype html>
<html lang="es">
    <head>
        <title>Alcance de Variables</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <script type="text/javascript">
            function miFuncion() {
              var mensaje = "Mensaje de prueba";
              alert(mensaje);
            }
            miFuncion();
        </script>
    </body>
</html>

Por lo tanto podemos decir que las variables que se declaran dentro del cuerpo de una función se dice que son locales a dicha función o que tienen un alcance local.

Los valores que toma una variable local dentro de una función pueden ser completamente distintos a los que tome una variable del mismo nombre pero que sea local a otra función o global al cuerpo del código..

Se dice que una variable local es usada (definida, modificada, etc.)

únicamente dentro de la función en la que es definida

Variabes Globales

Las constantes y las variables también pueden tener alcances globales. Es decir, es posible que una misma variable o constante puedan ser utilizadas por diferentes funciones y que (en el caso de variables) puedan ser modificadas por cada una de ellas.

Cuando esto ocurre, se dice que se tiene constantes globales o variables globales.

Para que el compilador considere a una variable como global, es necesario definirlas fuera de una función.

<!doctype html>
<html lang="es">
    <head>
        <title>Alcance de Variables</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <script type="text/javascript">
            var mensaje = "Mensaje de prueba";
            function miFuncion() {
                alert(mensaje);
            }
            miFuncion();
            alert(mensaje);
        </script>
    </body>
</html>

El código anterior es el ejemplo inverso al mostrado anteriormente. Dentro de la función miFuncion() se quiere hacer uso de una variable llamada mensaje y que no ha sido definida dentro de la propia función. Sin embargo, si se ejecuta el código anterior, si se mostrará la alerta.

El motivo es que en el código JavaScript anterior, la variable mensaje se ha definido fuera de cualquier función. Este tipo de variables automáticamente se transforman en variables globales y están disponibles en cualquier punto del programa (incluso dentro de cualquier función).

De esta forma, aunque en el interior de la función no se ha definido ninguna variable llamada mensaje, la variable global creada anteriormente permite que la instrucción alert() dentro de la función muestre el mensaje correctamente.

Nota:

Si una variable se declara fuera de cualquier función, automáticamente se transforma en variable global independientemente de si se define utilizando la palabra reservada var o no. Sin embargo, las variables definidas dentro de una función pueden ser globales o locales. Si en el interior de una función, las variables se declaran mediante var se consideran locales y las variables que no se han declarado mediante var, se transforman automáticamente en variables globales.

Por lo tanto, se puede rehacer el código del primer ejemplo para que muestre el mensaje correctamente. Para ello, simplemente se debe definir la variable dentro de la función sin la palabra reservada var, para que se transforme en una variable global:

<!doctype html>
<html lang="es">
    <head>
        <title>Alcance de Variables</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <script type="text/javascript">
            function miFuncion() {
                mensaje = "Mensaje de prueba";
            }
            miFuncion();
            alert(mensaje);
        </script>
    </body>
</html>

Finalmente conjuntemos estas dos prácticas con el siguiente código, diferenciando los ámbitos de cada variable

Veamos un ejemplo donde combinemos para explicar esto:

<!doctype html>
<html lang="es">
    <head>
        <title>Alcance de Variables</title>
        <meta charset="utf-8" />
            <script type="text/javascript">
                var variableGlobal = "Esto es una Variable Global";//Declarada Fuera de la funcion
                    function miFuncion() {
                        var variableLocal = "Esto es una Variable Local"
                        //se muestran las dos variables
                        alert("Variable Global dentro de la función: " + variableGlobal);
                        alert("Variable Local dentro de la función " + variableLocal);
                }
        </script>
    </head>
    <body>
        <script type="text/javascript">
            miFuncion();
            alert("Variable Global fuera de la función: " + variableGlobal); //se sigue mostrando
            alert("Variable Local fuera de la función " + variableLocal); // ya no se muestra
        </script>
    </body>
</html>

Este ejemplo, muestra cómo se puede declarar global y localmente las variables, en ámbito dentro y fuera de una función.