À quelles conséquences peut conduire la déclaration d'une variable avec var à l'intérieur d'une fonction?

La déclaration d'une variable avec var à l'intérieur d'une fonction a une portée fonctionnelle. Cela signifie que cette variable est accessible dans toute la fonction, en ignorant les portées de bloc (par exemple, à l'intérieur de if ou for).

Conséquences :

• Réécriture de variables : Une variable déclarée avec var dans un bloc peut réécrire une variable du même nom déclarée précédemment dans la même fonction, mais en dehors de ce bloc.
• Hautement (Hoisting) : La déclaration d'une variable avec var est levée au début de la fonction. Cela signifie qu'on peut utiliser la variable avant sa déclaration, mais sa valeur à ce moment sera undefined.
• Comportement inattendu dans les boucles : Dans les boucles for avec des opérations asynchrones (par exemple, setTimeout), la variable déclarée avec var aura la dernière valeur du cycle pour tous les callbacks asynchrones, et non la valeur au moment de l'itération.

Exemple de hoisting et de réécriture :

function exemplePortéeVar() {
  console.log(a); // undefined (à cause du hoisting)
  var a = 10;
  if (true) {
    var a = 20; // Réécrit la variable externe 'a'
    console.log(a); // 20
  }
  console.log(a); // 20 (valeur du bloc if)
}

exemplePortéeVar();

Exemple avec boucle et opérations asynchrones :

function exempleBoucleVar() {
  for (var i = 0; i < 3; i++) {
    setTimeout(function() {
      console.log(i); // Affichera 3, 3, 3 (i a la dernière valeur du cycle)
    }, 100);
  }
}

exempleBoucleVar();

En raison de ces caractéristiques, pour éviter des situations imprévues, il est recommandé d'utiliser let ou const, qui ont une portée de bloc.