Bonjour à tous,

Lors d'une interview un developer m'a demandé de fix un algorithme, n'ayant pas su résoudre , il m'a ensuite démontré les deux méthodes pour la résoudre. Mais je n'ai pas bien compris pourquoi ces méthodes marchaient et qu'est ce qu'elles résolvaient.

Pourriez-vous m'aider?

Voici l'algo de base :

var arr = [12, 10, 2];

for(var j = 0; j < arr.length; j++){
  setTimeout(function(){
    console.log('el ' + j + " / index : " + arr[j]);
  }, 3000)
}

Ce message va afficher

"el 3 / index : undefined"
"el 3 / index : undefined"
"el 3 / index : undefined"

Alors qu'il devrait afficher :

"el 0 / index : 12"
"el 1 / index : 10"
"el 2 / index : 2"

Voici les deux manières dont il a résolu l'exercice

1ère manière via une self-Invoking function

var arr = [12, 10, 2];

for(var i = 0; i < arr.length; i++ ){
  setTimeout((() => {
    console.log('el ' + i + " / index : " + arr[i]);
  })(), 3000)
}

Deuxième manière via l'instruction de variable "let"

var arr = [12, 10, 2];

for(let i = 0; i < arr.length; i++){
  setTimeout(function(){
    console.log('el ' + i + " / index : " + arr[i]);
  }, 3000)
}

Si quelqu'un sait me donner des explications ce serait top :)

Merci d'avance..

3 réponses


Bonsoir,

Il utilise une fonction qui s'auto appel "self-Invoking", quand tu utilises set timeout tu dois invoquer la fonction (par exemple pour pouvoir faire un clearTimeout dessus pour la désactiver), sans ça, rien ne fonctionnera.
Ensuite il utilise le mot clé Let qui permet de déclarer une variable, l'avantage c'est que la variable i déclaré avec Let pourra être utilisé uniquement dans le bloc en dessous (je ne sais pas si c'est clair, voici une doc qui explique un peu mieux..)
Et si tu n'as pas peur de l'anglais, voici un post Stackoverflow qui me parait intéressant.

Un tout grand merci pour ta réponse Laznet, je vais aller voir ta doc :)

Pour compléter la réponse de Laznet, voici une explication sur le fait que les variables existent dans la self-invoking function :)