Il n’est pas rare de devenir fou à cause des variables en JavaScript, bien souvent cela est dû à un soucis de portée d’une variable.

Voyons un exemple du problème

Vous pouvez retrouver un js fiddle représentant ce problème en suivant le lien suivant : https://jsfiddle.net/Loenix34/ksx82aso/4/

Lorsque vous exécuter ce fiddle, il parcourt un tableau, affiche une fois la valeur immédiatement et affiche une fois la valeur après un petit laps de temps via une fonction de callback envoyée à setTimeout().

On obtient le résultat suivant:

• myArray[0] = 1
• myArray[1] = 5
• myArray[2] = 99
• Ended time out with myArray[2] = 99
• Ended time out with myArray[2] = 99
• Ended time out with myArray[2] = 99

Il peut sembler étonnant mais selon le fonctionnement de JavaScript, il est parfaitement logique, ce n’est juste pas le comportement attendu.

Pourquoi cela se passe-t-il ainsi ?

À chaque parcours du tableau, les variables k et value sont bien définies aux bonnes valeurs mais l’environnement local utilise toujours la même variable value et la même variable k, leurs valeurs sont donc écrasées par la suivante à chaque tour. Au final, au moment de l’exécution du callback, ces variables contiennent les valeurs pour le dernier tour de la boucle, donc celle du dernier élément du tableau.

Comment résoudre ce problème ?

Il faut créer un réel environnement local pour vos variables, soit en les passant en paramètre à une autre fonction, soit en créant une fonction anonyme locale. Les variables sont ainsi persistées localement.

Voici le js fiddle montrant une des solutions possibles : https://jsfiddle.net/Loenix34/k0b77t0g/2/

Attention cependant ! Vos variables passées en paramètre sont justement persistées, si vous faites ça sur des tableaux ayant beaucoup d’entrées et que vous passez beaucoup de valeurs en paramètre, vous prenez le risque que les utilisateurs aient des problèmes de mémoire vive, il faut donc faire cela avec parcimonie.