Variables en Javascript

Las variables se definen mediante la palabra reservada var, que permite definir una o varias variables simultáneamente:

var variable1 = 16;
var variable2 = "hola", variable3 = "mundo";
var variable4 = 16, variable5 = "hola";

El nombre de las variables debe cumplir las dos siguientes condiciones:

  • El primer carácter debe ser una letra o un guión bajo (_) o un dólar ($).
  • El resto de caracteres pueden ser letras, números, guiones bajos (_) y símbolos de dólar ($).

No es obligatorio inicializar una variable al declararla:

var variable6;

Si la variable no se declara mediante el operador var, automáticamente se crea una variable global con ese identificador y su valor. Ejemplo:

var variable1 = 16;
variable2 = variable1 + 4;

En el ejemplo anterior, la variable2 no ha sido declarada, por lo que al llegar a esa instrucción, JavaScript crea automáticamente una variable global llamada variable2 y le asigna el valor correspondiente.

El ámbito de una variable (llamado scope en inglés) es la zona del programa en la que se define la variable. JavaScript define dos ámbitos para las variables: global y local.

El siguiente ejemplo ilustra el comportamiento de los ámbitos:

function muestraMensaje() {
    var mensaje = "Mensaje de prueba";
}
 
muestraMensaje();
alert(mensaje);

Cuando se ejecuta el código JavaScript anterior, su resultado no es el esperado, ya que no se muestra por pantalla ningún mensaje. La variable mensaje se ha definido dentro de la función 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 la variable. Sin embargo, cualquier instrucción que se encuentre en otras funciones o fuera de cualquier función no tendrá definida la variable mensaje.

Además de variables locales, también existe el concepto de variable global, que está definida en cualquier punto del programa (incluso dentro de cualquier función).

var mensaje = "Mensaje de prueba";
 
function muestraMensaje() {
    alert(mensaje);
}

El código JavaScript anterior define una variable 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.

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.

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, en el interior de una función, las variables declaradas mediante var se consideran locales y el resto se transforman también automáticamente en variables globales.

Por lo tanto, el siguiente ejemplo si que funciona como se espera:

function muestraMensaje() {
    mensaje = "Mensaje de prueba";
}
 
muestraMensaje();
alert(mensaje);

En caso de colisión entre las variables globales y locales, dentro de una función prevalecen las variables locales:

var mensaje = "gana la de fuera";
 
function muestraMensaje() {
    var mensaje = "gana la de dentro";
    alert(mensaje);
}
 
alert(mensaje);
muestraMensaje();
alert(mensaje);

El código anterior muestra por pantalla los siguientes mensajes:

gana la de fuera
gana la de dentro
gana la de fuera

La variable local llamada mensaje dentro de la función tiene más prioridad que la variable global del mismo nombre, pero solamente dentro de la función.

Si no se define la variable dentro de la función con la palabra reservada var, en realidad se está modificando el valor de la variable global:

var mensaje = "gana la de fuera";
 
function muestraMensaje() {
    mensaje = "gana la de dentro";
    alert(mensaje);
}
 
alert(mensaje);
muestraMensaje();
alert(mensaje);

En este caso, los mensajes mostrados son:

gana la de fuera
gana la de dentro
gana la de dentro

La recomendación general es definir como variables locales todas las variables que sean de uso exclusivo para realizar las tareas encargadas a cada función. Las variables globales se utilizan para compartir variables entre funciones de forma rápida.