Visibilité des variables

Les règles de visibilité sont uniques à JavaScript, elle doivent être bien comprises pour éviter des casse-têtes.

En JavaScript, les déclarations sont statiques et les assignements sont dynamiques. Cela à pour effet qu'une déclaration peut être placée n'importe où dans le code, elle sera prise en compte avant tout assignement. Cela a des effets très particuliers que nous allons étudier...

Toute la logique du langage est basée sur deux règles:

• Les déclarations sont statiques et évaluées avant l'exécution du code.
• La fonction est le seule scope local. Une fonction contenue dans une autre à accès aux variables de la fonction qui la contient et aux variable globales, mais pas l'inverse.

Seules les fonctions donnent une visibilité locale à une variable, les structures de contrôle n'ont pas cet effet. Pour être locale, la variable doit être déclaré, donc l'assignement se fait avec le préfixe var.

Un premier exemple pour montrer qu'une déclaration dans une fonction limite la visibilité à cette fonction.

var x = 1;
var y = 1;

function test1()
{
  x = 10;
  var y = 10;
}
test1();
document.write("x = " + x);
document.write("y = " + y);

x et y sont toutes deux assignées avec la valeur 10 dans la fonction. Seule y est redéclarée dans celle-ci, ce qui fait qu'elle est assignée localement alors que x est assignée dans le scope global même si l'assignement se fait dans la fonction.

Ces règles s'appliquent aussi à la structure de contrôle for.

function test2()
{
  a = 10;
  for(i = 0; i < 10; i++)
  {
    a = a + 2;
  }
}
test2();
document.write("a = " + a);
document.write("i = " + i);

On voit que aussi bien la variable i et la variable a sont assignées globalement et l'on voit aussi que i après l'exécution de la boucle vaut 10, la valeur limite du test conditionnel. Cela ne fait généralement pas de différence jusqu'à ce que l'on utilise une fonction récursive, auquel cas l'indice i pourra être incrémenté indéfiniment.

Maintenant on ajoute une déclaration de la variable de boucle, mais après l'utilisation de cette variable et sans l'assigner de nouveau.

var b = 3;
var j = 3;

function test3()
{
  var b = 10;
  for(j = 0; j < 10; j++)
  {
    b = b + 2;
  }
  var j;
}
test3();
document.write("b = " + b);
document.write("j = " + j);

On peut vérifier sur cet exemple que la position de la déclaration importe peu: il suffit que la variable soit déclarée quelque part dans la fonction pour qu'elle devienne locale et elle peut être déclarée après avoir été utilisée!