var dans les boucles !

let tab = ["a","b","c"]; var printI = function(){      console.log(tab[i]); }; for (var i=0; i<tab.length;i++){     setInterval(printI, 1000*(i+1)); }

let tab = ["a","b","c"]; var i; // i sera égal à  3 lors des appels var printI = function(){      console.log(tab[i]); }; for (i=0; i<tab.length;i++){     setInterval(printI, 1000*(i+1)); }

for (var i=0; i<tab.length;i++){
     setTimeout(function(){
       console.log("in call back " + i);
     }, 3000*(i+1));
}

Correction avec closure

"use strict";

var _loop = function _loop(i) {
    setTimeout(function () {
        console.log("in call back " + tab[i]);
    }, 1000 * (i + 1));
};

for (var i = 0; i < tab.length; i++) {
    _loop(i);
}


Correction  : 

for (let i=0; i<tab.length;i++){
    setTimeout(function(){
        console.log("in call back " + tab[i]);
    }, 1000*(i+1));
}

Hoisting ?

D'une certaine façon let fonctionne comme var, la seule différence dans cette analogie est que let fonctionne avec les portées de bloc et var avec les portées des fonctions.

L’apparition de Let pour déclarer les variables a mis en avant le terme de Hoisting.

Hoisting en action !

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
}

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