ProgrammationDéveloppeur Frontend

Expliquez la différence entre la déclaration de variables avec let, const et var en TypeScript. Comment ce choix influence-t-il la portée, la possibilité de redéclaration, la mutabilité de la valeur et la protection contre les erreurs ? Donnez des exemples de scénarios typiques d'utilisation de chaque méthode de déclaration.

Réussissez les entretiens avec l'assistant IA Hintsage

Réponse.

En TypeScript (comme dans le JavaScript moderne), les variables peuvent être déclarées avec let, const et var, et il existe d'importantes différences entre elles :

  • let — Portée limitée au bloc, la variable peut être redéfinie (attribuer une nouvelle valeur), mais ne peut pas être déclarée une deuxième fois dans la même portée.
  • const — Portée limitée au bloc également, la valeur doit être attribuée immédiatement, ne peut pas être redéfinie (mais les propriétés internes de l'objet déclaré avec const peuvent être modifiées !).
  • var — Portée fonctionnelle, mécanisme de levée (hoisting) possible, la variable peut être redéfinie et modifiée.

Exemple :

if (true) { let a = 10; const b = 20; var c = 30; } console.log(c); // 30 — visible en dehors du bloc ! console.log(a); // Erreur : a is not defined console.log(b); // Erreur : b is not defined

Scénarios typiques :

  • const — pour une valeur qui ne devrait pas changer (constantes, configurations, références de fonctions).
  • let — pour des valeurs qui changent pendant l'exécution (compteurs, variables dans une boucle).
  • var — à éviter, sauf pour le support de code ancien.

Question piège.

const peut-il rendre un objet entièrement immuable ? Expliquez, donnez un exemple.

Réponse: Non, const empêche uniquement le changement de la référence elle-même, mais ne protège pas contre les modifications des propriétés de l'objet !

const obj = { x: 1 }; obj.x = 2; // Cela est permis ! obj = { x: 3 }; // Erreur : assignment of a new reference

Pour une immutabilité complète, on utilise Object.freeze :

const frozen = Object.freeze({ x: 1 }); frozen.x = 2; // Erreur en mode strict, mais le compilateur ne prévient pas toujours !

Exemples d'erreurs réelles dues à la méconnaissance des subtilités du sujet.


Histoire

Lors de la migration d'un grand projet frontend vers TypeScript, les développeurs ont massivement remplacé var par let, sans tenir compte que la portée est désormais limitée au bloc. Cela a conduit à des compteurs dans certaines boucles for étant inaccessibles en dehors de la boucle, entraînant des erreurs inattendues dans la logique : le code a cessé de fonctionner lorsqu'il a tenté d'accéder au compteur de la boucle après celle-ci.


Histoire

Un développeur a déclaré une constante via const pour stocker un objet de configuration, pensant que les propriétés étaient protégées contre les modifications. Plus tard, à l'exécution, un autre endroit du programme a changé une propriété : cela a conduit à des erreurs difficiles à détecter dans le traitement des données, car du code externe a "inopinément" changé les paramètres globaux pour tous les utilisateurs.


Histoire

Le projet utilisait simultanément let, const et var sans politique claire. Un composant a redéclaré une variable var dans la fonction, tandis qu'un autre endroit s'attendait à ce que la variable soit déclarée via let, et donc qu'elle ne serait pas visible en dehors du bloc. Résultat : chevauchement des variables, échecs dans la logique interne et débogage complexe de problèmes avec un cycle de vie des variables peu évident.