ES6: Différence entre var et let

Formule mathématiques

Depuis deux semaines je suis malade, et comme je ne suis pas dans mon assiette, je ne peux pas me permettre de vous écrire un article très complexe.
Je suis conscient qu’entre les vacances et ce problème de santé je ne suis pas très régulier et je m’en excuse, je ferais mieux à la rentrée je l’espère.
Mais en tout cas ça tombe très bien, on va revoir ensemble de petites notions essentielles.
Aujourd’hui, penchons nous sur la manière de déclarer une variable en javascript, et plus précisément à la différence entre var et let.

Principale différence: La portée

Comme l’indique le titre, la principale différence entre une variable déclaré avec var et celle avec let est sa portée.

  • Une variable déclarée avec var aura une portée global. On pourra y accéder depuis n’importe quel endroit du code.
  • Avec let, la variable sera uniquement disponible dans le block courant.

Un exemple vaut mieux que milles mots:

for( var i = 0; i < 5; i++ ) {
    console.log(i); // 0, 1, 2, 3, 4, 5
  };

  console.log(i); // On obtiens 5

  for( let j = 0; j < 5; j++ ) {
    console.log(j); // 0, 1, 2, 3, 4, 5
  };

  console.log(i); // On obtiens toujours 5
  console.log(j); // On obtiens : ReferenceError: j is not defined

On vois bien que j est inconnu lorsqu’on essaye de l’afficher en dehors de la boucle for.

Autres différence

Hoisting ou levage

Lorsqu’un script javascript est exécuté, il est lu une première fois par le moteur javascript avant de l’exécuter.
Ici ce qui nous intéresse, c’est que pendant cette première lecture, toutes les déclarations de variables sont remontés en haut de leur block de porté.
Ainsi, les var se retrouvent déclarées en haut du script, les let en haut de leur block.

Par conséquent, l’exemple suivant affichera undefined:

  console.log(c);  // undefined
  var c = 2;

Mais l’exemple suivant renverra une erreur de définition:

  console.log(b); // ReferenceError: b is not defined
  let b = 3;

Voici un article qui explique ce principe de levage.

Closure dans les boucles

Autre point intéressant, les closures dans les boucles.
Dans l’exemple suivant, on lance en différé un affichage de variable dans une boucle.
On voit que dans le cas du var, la valeur de i n’est pas « bloquée » à l’instant où la fonction est créée. À la place, elle récupère la valeur de i au moment de l’exécution du code en différé. On obtiens donc toujours la valeur final, soit 5.

for (var i = 0; i < 5; ++i) {
  setTimeout(function () {
    console.log(i); // Affiche '5' 5 fois
  }, 200);  
}

Avec un let:

for (let i = 0; i < 5; ++i) {
  setTimeout(function () {
    console.log(i); // Affiche 0, 1, 2, 3, 4 
  }, 100);  
}

Conclusion

Nous en avons terminé pour cette fois. Promis les articles suivants seront plus longs et plus complet.

Mais il y a une chose à retenir, avant de vouloir remplacer tous vos var par des let, pensez à la compatibilité !
IE11 est encore en retard et ne le supporte qu’à moitié ! Pensez à vérifier sur canIUse !


Articles récents

ES6: Différence entre var et let

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Retour en haut