var

Exemple interactif

var x = 1;

if (x === 1) {
  var x = 2;

  console.log(x);
  // Expected output: 2
}

console.log(x);
// Expected output: 2

Syntaxe

var nomVar1 [= valeur1] [, nomVar2 [= valeur2]  [, nomVarN [= valeurN]]];

nomvarN

Le nom de la variable, cela peut tre n'importe quel identifiant valide.

valeurN

La valeur initiale affecter la variable, cela peut tre n'importe quelle expression valide. S'il n'y a aucune valeur fournie, la variable vaudra undefined.

Description

Les dclarations de variables sont traites avant que le code soit excut, quel que soit leur emplacement dans le code. La porte d'une variable dclare avec var est le contexte d'excution courant, c'est--dire : la fonction qui contient la dclaration ou le contexte global si la variable est dclare en dehors de toute fonction.

Si on affecte une valeur une variable qui n'a pas t dclare (le mot-cl var n'a pas t utilis), cela devient une variable globale (une proprit de l'objet global) lorsque l'affectation est excute. Les diffrences entre les variables dclares et les variables non-dclares sont :

1. Les variables dclares sont contraintes dans le contexte d'excution dans lequel elles sont dclares. Les variables non-dclares sont toujours globales.

   js

   function x() {
     y = 1; // Lve une exception ReferenceError en mode strict
     var z = 2;
   }
   
   x();
   
   console.log(y); // Affiche "1" dans la console
   console.log(z); // Lve une exception ReferenceError:
   // z n'est pas dfinie en dehors de x
   

2. Les variables dclares sont cres avant que n'importe quel autre code soit excut. Les variables non-dclares n'existent pas tant que leur code n'est pas excut.

   js

   console.log(a); // Lve une exception ReferenceError.
   console.log("on continue..."); // N'est jamais excut
   

   js

   var a;
   console.log(a); // Affiche "undefined".
   console.log("on continue..."); // Affiche "on continue...".
   

3. Les variables dclares sont des proprits non-configurables de leur contexte d'excution (la fonction courante ou le contexte global). Les variables non-dclares sont configurables (ce qui signifie qu'elles peuvent tre supprimes).

   js

   var a = 1;
   b = 2;
   
   delete this.a; // Lve une TypeError en mode strict. choue silencieusement sinon.
   delete this.b;
   
   console.log(a, b); // Lve une exception ReferenceError.
   // La proprit 'b' a t supprime et n'existe plus.
   

En raison de ces trois diffrences, il faut viter de ne pas dclarer une variable car cela peut provoquer des rsultats inattendus. Il est donc fortement recommand de toujours dclarer les variables, qu'elles soient dans une fonction ou dans la porte globale. Le mode strict, introduit avec ECMAScript 5, lve une exception lorsqu'une variable n'est pas dclare.

La remonte de variables (hoisting)

Les dclarations de variables (et les dclarations en gnral) sont traites avant que n'importe quel autre code soit excut. Ainsi, dclarer une variable n'importe o dans le code quivaut la dclarer au dbut de son contexte d'excution. Cela signifie qu'une variable peut galement apparatre dans le code avant d'avoir t dclare. Ce comportement est appel remonte (hoisting en anglais) car la dclaration de la variable est remonte au dbut de la fonction courante ou du contexte global.

bla = 2;
var bla;
// ...

// est implicitement trait comme :

var bla;
bla = 2;

tant donn ce comportement, il est recommand de toujours dclarer les variables au dbut de leurs portes (le dbut du code global ou le dbut du corps de la fonction) afin de mieux (sa)voir quelles variables font partie de la fonction et lesquelles proviennent de la chane de portes.

Il est important de noter que la remonte des variables affecte uniquement la dclaration et pas l'initialisation de la valeur. La valeur sera affecte lorsque le moteur accdera l'instruction d'affectation. Par exemple :

function faireQuelqueChose() {
  console.log(truc); // undefined
  var truc = 111;
  console.log(truc); // 111
}

// Correspond en fait  :
function faireQuelqueChose() {
  var truc;
  console.log(truc); // undefined
  truc = 111;
  console.log(truc); // 111
}

Exemples

Dclarer et initialiser deux variables

var a = 0,
  b = 0;

Affecter deux variables avec la mme chane de caractres

var a = "A";
var b = a;

// est quivalent  :

var a,
  b = (a = "A");

Attention l'ordre :

var x = y,
  y = "A";
console.log(x + y); // undefinedA

Ici, x et y sont dclares avant que n'importe quel code soit excut, les affectations sont ralises aprs ! Au moment o x = y est valu, y existe donc on n'a pas d'erreur ReferenceError mais sa valeur est undefined. Ainsi, x reoit la valeur undefined. Ensuite, y reoit la valeur 'A'. Aprs la premire ligne de code, on a donc la situation o x === undefined && y === 'A', ce qui explique le rsultat.

Initialiser plusieurs variables

var x = 0; // Variable dans la porte globale (le fichier)

function f() {
  var x = (y = 1); // x est dclar localement
  // ce qui n'est pas le cas de y !
}
f();

console.log(x, y); // 0, 1
// x a bien la valeur globale attendue
// y a t contamin dans la fonction !
// Une exception ReferenceError sera leve en mode
// strict car y n'est pas dfini dans cette porte

Les variables globales implicites

Il est possible de faire rfrence des variables qui sont des variables globales implicites depuis la porte d'une fonction externe :

var x = 0; // Dclare x comme variable globale du fichier, on lui affecte 0

console.log(typeof z); // "undefined", car z n'existe pas encore

function a() {
  var y = 2; // Dclare y dans la porte de la fonction a
  // Affecte 2 comme valeur  y

  console.log(x, y); // 0 2

  function b() {
    x = 3; // Affecte 3  la variable globale x
    // Ne cre pas une nouvelle variable globale
    y = 4; // Affecte 4  la variable externe y,
    // Ne cre pas une nouvelle variable globale
    z = 5; // Cre une nouvelle variable globale
    // et lui affecte la valeur 5.
  } // (lve une ReferenceError en mode strict.)

  b(); // Cre z en tant que variable globale
  console.log(x, y, z); // 3 4 5
}

a(); // l'appel  a() entrane un appel  b()
console.log(x, z); // 3 5
console.log(typeof y); // "undefined" car y est local  la fonction a

Spcifications

Compatibilit des navigateurs

Voir aussi

• let
• const