var et let en action

Cas des boucles : 

Le mot-clé let permet de lier des variables localement dans la portée des boucles for. Contrairement au mot-clé var qui lui rend les variables visibles depuis l'ensemble de la fonction qui contient la boucle.

Voici une illustration simple comparant les codes

for ( var i=0 ; i < 3 ; i++ ) {
  toto ( i )  // Chaque i pointe sur le même valeur
}

for ( let i=0 ; i < 3 ; i++ ) {
  toto ( i ) // Chaque i a une valeur différente
}

Exemple

Voici un premier exemple montrant l'impact de l'utilisation de let !

L'utilisation de var dans la boucle, nous oblige à mettre en place une "seconde" closure



Article pour aller plus loin

Autre exemple

cas du let !

var arrayAffichage = [];

for (let i = 0; i< 3; i++) {

  arrayAffichage[i] = function toto() {

    console.log(i);

  };

}

arrayAffichage[0]();

 cas du var ! 

/*
Une "closure" permet de référencer une variable qui existe dans la fonction parent. Ici, elle ne fournit pas la valeur de la variable au moment de sa création, mais fourni la dernière des valeurs dans la fonction parent.
*/

var arrayAffichage = [];
 for (var i = 0; i< 3; i++) {
  arrayAffichage[i] = affiche;}

function affiche() {
    console.log(i);
  }

arrayAffichage[0]();

Tester ce code ! /* solution une closure bis  : Création d'une référence non partagée'*/

var arrayClosureAffichage = [];
 for (var i = 0; i< 3; i++) {
  arrayClosureAffichage[i] = afficheClosure(i);
}

function afficheClosure(i) {
  return function(){
    console.log(i);    
  };
}

arrayClosureAffichage[0]();

/* Autre soution : itérateur forEach */
var arrayAffichages = [afficheForEach,afficheForEach,afficheForEach];

arrayAffichages.forEach(function(f,i){
  f(i);
});

function afficheForEach(i) {
    console.log(i);
}





Autre exemple montrant l'importance de l'utilisation de let versus var !

rempcar var/let dans le code