var et let en action

Cas des boucles : 


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
}


JS Bin on jsbin.com

Exemple

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

JS Bin on jsbin.com

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

JS Bin on jsbin.com

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]();

let on jsbin.com

 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);
}
JS Bin on jsbin.com


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

rempcar var/let dans le code