Declarar variables con VAR en JavaScript

Tradicionalmente, en JavaScript se ha manejado la palabra reservada var para la declaración de variables con un ámbito local. Así, en este artículo se describe todo lo concerniente al uso de esta palabra reservada para la declaración de variables; su sintaxis, su ámbito y confusiones en el contexto de los scripts.

Declarar una variable var con valor indefinido

En el siguiente ejemplo, se declara una variable Javascript con esta palabra reservada pero sin la asignación de algún valor:

var nombreAuto;

Después de esta declaración, la variable no tiene ningún valor; pero técnicamente tiene el valor de "indefinido".

Para asignarle un valor a la variable se realiza con el operador de asignación "=" (signo igual):

nombreAuto = "Volvo";

Declarar una variable var con un valor definido

También se pudo haber asignado el valor en el mismo momento en que se declaró la variable:

var = nombreAuto = "Volvo";

Después de esta declaración, la variable tiene un valor definido como una cadena de texto "Volvo" y que esta disponible para su acceso en los scripts.

Para reasignarle un nuevo valor a esta variable, de igual manera se realiza con el operador de asignación "=" (signo igual):

nombreAuto = "Mercedes";

Ahora la variable tiene el valor definido como otra cadena de texto "Mercedes", y que de igual manera esta disponible para acceso en los scripts. Pero ojo, la cadena "Volvo" ya no existe.

Las variables declaradas con var si pueden ser redeclaradas

Las variables declaradas con la palabra reservada var no tienen restricciones de declaración en el lenguaje JavaScript.

var x = "Hola Mundo";
var x = 1; // Es válido.

El hecho de que una variable de tipo var pueda ser redeclarada en los scripts; puede llevar a errores lógicos por parte de los principiantes en la programación en JavaScript. Así, se debe estar muy consciente de este comportamiento para evitar errores de programación.

Ámbito de una variable declarada con var

Los ámbitos de una variable var son dos:

• Ámbito Global
• Ámbito de Función

El Ámbito Global en variables var

Para dar a variable var un ámbito global se requiere que sea declarada fuera de cualquer función, es decir, a nivel raíz o dentro de cualquier bloque aotado por las llaves de apertura y de cierre {} y/o de cuaquier estructura de control que cuentan también con bloques acotados por las llaves según sus estructuras condicionadas y/o iteraciones.

Nota: existe otro ámbito de bloque que no es menejado por las variables declaradas con var, pero que si son manejadas por las variables declaradas con let y con const.

En el siguiente ejemplo, creamos la variable nombreAuto y le asignamos el valor "Volvo". Después mostramos la valor dentro del párrafo HTML con id="demo":

<p id="demo"></p>

<script>
  var nombreAuto = "Volvo";  
  document.getElementById("demo").innerHTML = nombreAuto;
</script>

Tomando en cuenta este ejemplo, la declaración de la variable nombreAuto se hace fuera de cualquier bloque, entonces; la variable tiene un ámbito global, así será accesible desde cualquier script de la página y podremos accesarla inclusive dentro de un bloque:

<p id="demo"></p>

<script>
  var nombreAuto = "Volvo";
  {
    document.getElementById("demo").innerHTML = nombreAuto; // Muestra Volvo
  }
</script>

El Ámbito de Función en variables var

El ámbito de función se da cuando una variable var es declarada dentro de una función, así, la variable solo existe dentro de esta función cuando se esta ejecutando y deja de existir una vez terminada la ejecución de dicha función.

En el siguiente ejemplo declaramos una variable dentro de una función para ver su comportamiento:

<script>

function prueba1(){
  var nombreAuto = "Volvo";
  document.getElementById("demo").innerHTML = nombreAuto; // muestra Volvo
}

prueba1();

document.getElementById("demo").innerHTML = nombreAuto; // Error

</script>

El script ejecuta la función prueba1() en donde se crea una variable local internamente dentro la función ( esto implica un ámbito de función ) y posteriormente se hace uso de esta variable para mostrarla en un elemento HTML.

El error ocurre posteriormente a la llamada de la función prueba1(), porque una vez que termino la ejecución de la esta función, la variable llamada nobreAuto ya no existe y mucho menos fuera de la función. Así que cuando se intenta accesar a esta variabel nombreAuto para asignarla a un elemento HTML es un rotundo error porque variable simplemente no existe.

El Ámbito de bloque sin relevancia en variables var

En JavaScript los bloques de código son acotados con el caracter de llave de apertura { y termina con el caracter de llave de cierre }, así todo el código contenido entre estas dos llaves tentran el ámbito de bloque.

Las estructuras de control hacen uso de estos bloques de código para ejecutarlos dependiendo de su estructura, condiconantes, iteraciones  y demás. así cada bloque que se ejecute su código de la misma manera tiene el ámbito de bloque.

Pero las variables declaradas con var no reconocen el ámbito de bloque, de esta menera; no tiene ninguna relevancia una varible var si se declara  dentro de una estructura de control, porque entonces tendrá un ámbito global o si declara en otra estructura de control que a su vez se ejecuta dentro de una función; no es relevante el ámbito de bloque de la estructura, pero si lo tendrá el ámbito de función (variable local).

Veamos y analicemos el siguiente código JavaScript:

<script>
var x = 1;
document.getElementById("muestra1").innerHTML = x; // muestra 1

function prueba2(){
  var x = 2;
  document.getElementById("muestra2").innerHTML = x; // muestra 2
}

prueba2();
document.getElementById("muestra3").innerHTML = x; // muestra 1

var i = true;
if( i ){
  var x = 3;
  document.getElementById("muestra4").innerHTML = x; // muestra 3
}

document.getElementById("muestra5").innerHTML = x; // muestra 3
</script> 

Explicando las 5 muestras:

1. x como global vale:
   Al principio del script se declarada la variable x como global y se la asigna el valor de 1, posteriormente se muestra.
2. x como local dentro de la función vale:
   Dentro de la función se declara una nueva variable x y se le asigna el valor de 2, posteriormente se muestra.
   La variable global x que se declaró al principio del script queda oculta dentro la función y no se esta alterando, esto porque dentro de la función ahora existe otra variable local llamada exactamente igual como x.
3. x como global tanto fuera como después de la llamada a la función vale:
   Mostramos el valor de x global y comprobamos que su valor es el mismo que se le asigno inicialmente.
   Esto porque una vez fuera de la función de nuevo es accesible la variable x global declarada al principio del script y su valor no fue alterado. La otra variable local llamada de igual forma como x dentro de la función ya no existe aquí porque ya no se esta dentro de la función.
4. x global dentro de la estructura if vale:
   (Declaramos una variable i solo para ejecutar una condición verdadera con la estructura de control if)
   Una vez ejecutándose la estructura if, redeclaramos la variable x global y mostramos su valor.
   Aquí no se tiene el mismo comportamiento que en la función, aquí si se esta teniendo acceso a la variable x global.
5. x fuera de la estructura if vale:
   Para fines de comprobar que la variable x global si se altero su valor original la mostramos.