Variables locales y globales en JavaScript

Dependiendo de donde se declaren he inicialicen las variables, se dicen que son locales y globales por el alcance que tienen las mismas.

Variables Locales

Primero veamos este tipo para comprender mejor las globales.
Cuando decimos que una variable es local, es debido, a que dicha variable se encuentra declarada dentro de las llaves de una función cualquiera que esta sea.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Alcance de las variables</title>
</head>
<body>
    <script type="text/javascript">
        var variableGlobal = "Yo soy una Variable Global.";
        function miFuncion(funcionCont) {
            alert(variableGlobal);
            alert(funcionCont);
        }
        miFuncion("Un argumento");
    </script>
</body>
</html>

¿Qué ha pasado?

El código define dos variables:

Una variable global llamada variableGlobal
Una variable llamada funcionCont. La cual es local a la función miFuncion().

Ambas variables se pasan a la respectiva función de alert() dentro de miFuncion().
Cuando la función miFuncion() es llamada, el contenido de ambas variables son enviados con éxito y se muestran en la pantalla.

Veamos otro ejemplo.

<!doctype html>
<html>
<head>
<title>Alcance de Variables</title>
<script type="text/javascript">
    var variabeGlobal = "Esto es una variable Global";
    function miFuncion(funcionCont) {
        alert("Variable global dentro de la función: " + variabeGlobal);
        alert("Variable local dentro de la función: " + funcionCont);
    }
</script>
</head>
<body>
    <script type="text/javascript">
        miFuncion("Esto es una variable Local");
        alert("Variable global fuera de la función: " + variabeGlobal);
        alert("Variable local fuera de la función: " + funcionCont);
    </script>
</body>


</html>

¿Qué ha pasado?

En primer lugar veamos que hemos creado dos scripts, uno en la cabecera y otro en el cuerpo.

Esto no tiene nada que ver con el alcance de las variables, pero lo he hecho de esta manera para entizar la separación entre una variable local y una global.

Veamos primero el primer script, el que se encuentra entre <head></head>:

En el se declara una variable Global variableGlobal, la cual se encuentra fuera de una función y por lo tanto afectara en todo lo largo y ancho del documento su valor.
Después creamos la función miFuncion la cual tiene como argumento funcionCont, que posteriormente será sustituido por la cadena "Esto es una variable Local"
Finalmente, el contenido de la función corresponde a dos alertas que hacen referencia a las dos variables tanto global como local. Las cuales son tomadas desde adentro de la función.

En el segundo script:

Se especifica el argumento de miFuncion().
Después se imprimen dos alertas como lo hicimos en el ejemplo anterior, solamente que esta vez lo hacemos desde afuera de la función.

Si usted corre el script en su navegador, la aparecerán las tres primeras alertas tal como las hemos especificado en el código, pero, por qué es así, si se supone que hemos especificado cuatro alertas.

La respuesta es que la cuarta alerta corresponde a la variable declarada dentro de la función por lo tanto es LOCAL, al momento en el que el interprete pasa por esa línea, simplemente la ignora ya que se trata de una variable no definida "undefined".

Incluso dependiendo de la configuración de su navegador, el interprete lo especifica como un error, y el error es que dicha variable no esta definida.

Espero que con este ultimo ejemplo halla quedado claro el alcance de las variables. es un tema que parece sencillo, pero en la practica es de vital importancia ya que de esto depende que su script corra, y no se confunda cuando realice las declaraciones he inicializaciones de sus variables.