JavaScript : rendre le Web interactif (école d'ingénieur) · Chapitre 4 · Application directe du cours
var dans une boucle
Portée, fermetures et this · niveau 3 (difficile)
Énoncé
Un développeur veut afficher, une seconde après le lancement, les trois titres d'une liste :
var titres = ["HTML", "CSS", "JavaScript"];
for (var i = 0; i < titres.length; i++) {
setTimeout(() => console.log(i, titres[i]), 1000);
}Qu'affiche ce programme ? Expliquer, puis corriger en changeant un seul mot.
Corrigé
3 undefined
3 undefined
3 undefinedIl n'y a qu'une variable i, de portée module ; les trois fonctions passées à setTimeout s'exécutent une seconde plus tard, quand la boucle est terminée et que i vaut 3. Or titres[3] n'existe pas : undefined. En remplaçant var i par let i, chaque tour de boucle a sa variable, et chaque fonction se souvient de la sienne (et var titres devient const titres) :
const titres = ["HTML", "CSS", "JavaScript"];
for (let i = 0; i < titres.length; i++) {
setTimeout(() => console.log(i, titres[i]), 1000);
}
0 HTML
1 CSS
2 JavaScript100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.