Expresión var en JavaScript

por
var en JavaScript
var JavaScript

Una expresión var en javascript es lo que declara una variable, cuyo valor inicial se puede inicializar opcionalmente.

Características generales

Estructura var en javascript

var varname1 [= value1] [, varname2 [= value2] ... [, varnameN [= valueN]]];

varnameN

El nombre de la variable, que puede ser cualquier identificador JavaScript válido.

valueN

El valor inicial de la variable var, cualquier expresión válida se puede utilizar en JavaScript, el valor predeterminado es undefined.

La declaración de variables se manejará antes de que se ejecute cualquier código donde sea que ocurran. El alcance de las variables declaradas por nosotros vares el contexto de ejecución actual, como el campo de funciones, o el campo público (si las variables se declaran fuera de cualquier función). Tenga en cuenta que volver a declarar (var) variables en JavaScript no pierde su valor.

La asignación de un valor a una variable no reclamada creará una variable global (es decir, se convertirá en una propiedad del objeto global). Las diferencias entre variables declaradas y no declaradas son:

1. Las variables declaradas estarán limitadas en el contexto de la implementación en la que están definidas, y las variables no declaradas siempre serán públicas.

function x() {
  y = 1;    // Lanzar un ReferenceError en modo estricto 
  var z = 2;
}
x();
console.log(y); // "1" 
console.log(z);  // Lanza la excepción ReferenceError: z no está definido fuera de x

2. Las variables declaradas se crearán antes de que se ejecute cualquier código, mientras que las variables no declaradas no existirán hasta que se ejecute el código que generan:

console.log(a);                 // Lanza la excepción ReferenceError. 
console.log('still going...'); // Esta expresión no se ejecutará

Las variables declaradas son:

var a;
console.log(a);     // "undefined" 
console.log('still going...'); // "still going..."

3. Las variables declaradas serán una propiedad que no se puede configurar en el contexto de ejecución (la función u objeto global), mientras que las variables no declaradas pueden ser configurables (es decir, se pueden omitir, por ejemplo):

var a = 1;
b = 2;
 // Lanza TypeError en modo estricto 
// O la ejecución fallará silenciosamente
delete this.a;
delete this.b;
console.log(a, b);  // Lanza la excepción ReferenceError. 
// La característica ha sido eliminada y ya no existe

Debido a las tres diferencias anteriores, encontramos que no declarar variables a menudo conduce a resultados inesperados. Por lo tanto, es una buena idea declarar siempre las variables si están dentro del dominio de una función o en el dominio público. Tenga en cuenta que asignar un valor a una variable no declarada en ECMAScript 5 con el modo estricto habilitado arrojará un error.

Uso de variables antes de definirlas

Dado que la declaración de variables se procesará antes de que se ejecute cualquier código, declarar la variable en cualquier lugar del código es equivalente a declararla al principio del archivo, lo que significa que la variable se puede usar antes de declararla:

bla = 2;
var bla;
// ...
// El código anterior se interpretará de la siguiente manera
var bla;
bla = 2;

Es por eso que es una buena idea declarar las variables en la parte superior de su dominio (es decir, encima del código para las variables en el dominio público, o en la parte superior de la función) para tener claro qué variables obtendremos del alcance de la función (el alcance de la función, es decir, son variables locales) y cuáles son las variables cuyo valor averiguaremos a través de la cadena de alcance. 

Es importante señalar que este comportamiento afecta la declaración del valor de la variable y no tiene efecto en la inicialización de su valor, es decir, el valor será asignado a la variable cuando se acceda a ella por ejecución:

function do_something() {
  console.log(bar); // undefined
  var bar = 111;
  console.log(bar); // 111
}
// El código anterior se interpretará como: 
function do_something() {
  var bar;
  console.log(bar); // undefined
  bar = 111;
  console.log(bar); // 111
}

Ejemplos y aplicaciones en código

Declarar 2 variables e inicializar su valor

var a = 0, b = 0;

Declaración de dos variables con el mismo valor de texto

var a = 'A';
var b = a;
// lo anterior es equivalente a
var a, b = a = 'A';

Pero tenga en cuenta que debe usar el orden correcto:

var x = y, y = 'A';
console.log(x + y); // undefined A

Digamos que aquí acerca de las dos variables var (x, y) antes de ejecutar el código en javascript, el proceso de asignación se inició desde la expresión x = y y la variable y estaba presente, por ReferenceError lo que no se lanzó la excepción y el valor de retorno fue undefined, por lo que se convirtió en un valor x igual undefined, luego se asignó el valor A a la variable y así se convirtió x === undefined && y === 'A'.

Inicializar múltiples variables

var x = 0;
function f() {
  var x = y = 1;
}
f();
console.log(x, y);

Tenga en cuenta que la variable x se definió localmente dentro de la función, f()‎ pero la variable y no era local. Cuando intenta acceder al valor de las variables fuera de la función, excepción ReferenceError en el estilo estricto a (porque la variable y no está definida), o la salida será 0 1 porque la variable x es una variable en el dominio público y la variable y no fue autorizado antes de asignar su valor.

Variables globales no declaradas

var  x  =  0 ;   // Esta variable es global y tiene un valor de 0
consola . log ( typeof  z );  // indefinido porque la variable aún no está definida
función  a ()  { 
  var  y  =  2 ;    // Esta variable es local y tiene un valor de 2
  consola . log ( x ,  y );    // 0 2
  función  b ()  { 
    x  =  3 ;   // asigna el valor de nuevo a la variable global, y no se creará ninguna nueva variable 
    y  =  4 ;   // asigna el valor de nuevo a la variable global, y no se creará una nueva variable 
    z  =  5 ;   // crea una nueva variable global y le asigna el valor 5 
  }          // (arrojará un ReferenceError en estilo estricto)
  b ();      // Llamar a esta función creará la variable z 
  console . log ( x ,  y ,  z );   // 3 4 5 
}
a ();                    // Esta función llamará a la función de 
console.log(x, z);     // 3 5
console.log(typeof y);  // indefinido porque esta variable es local

Soporte de navegadores

CaracterísticaChromeFirefoxIEOperaSafari
Soporte básicosísísísísí