Déclaration de variables en JavaScript : let et const expliqués

Dans ce tutoriel, nous allons aborder les différentes méthodes de déclaration de variables en JavaScript, notamment les mots-clés let et const de la norme ES6 par rapport à var, qui était jusqu'à ES5 la seule manière de créer des variables. De nombreux développeurs ont rencontré des comportements inattendus lors de l'utilisation de var, ce qui a entraîné des bugs. Cette leçon t'aidera à comprendre les méthodes modernes et à garantir que tu déclare et utilises les variables de manière efficace.

Principales conclusions

Les nouvelles déclarations de variables let et const offrent des avantages en termes de portée, de visibilité et de sécurité de l'utilisation des variables. let permet d'utiliser une variable à l'intérieur d'un bloc de portée, tandis que const crée une assignation immuable.

Guide étape par étape

Déclaration de variables

Pour travailler efficacement avec des variables en JavaScript, nous allons d'abord examiner la déclaration de variables en utilisant var, let et const. Commençons par le fichier main.js, qui est intégré dans ton document HTML.

Ici, nous allons utiliser le mot-clé var pour déclarer une variable. Créons une variable nommée W et assignons-lui une valeur initiale.

Comportement de var

Un comportement typique de var est que la variable est visible même si tu ne l'initialises qu'ensuite dans le code. Testons cela :

Je vais ajouter un affichage dans la console de C avant l'initialisation. Attends-toi à ce que le résultat apparaisse lorsque je défini la variable C à 0. Dans la sortie, undefined devrait apparaître, car la valeur est définie après la ligne d'assignation.

Introduction de let

Regardons maintenant let. Pour montrer la différence, remplaçons var par let et initialisons la variable C directement avec let C = 0.

Si j'essaie d'utiliser C avant l'assignation, je reçois un message d'erreur indiquant que j'accède à une variable non initialisée. Ce comportement garantit que tu obtiens toujours une erreur lorsque tu tentes d'accéder à une variable non définie.

Portée de bloc avec let

Un autre avantage de let est la possibilité de déclarer une variable à l'intérieur d'une portée de bloc. Utilisons une instruction if pour cela :

Si je crée let C = -1 à l'intérieur du bloc if, cette variable n'est visible qu'à l'intérieur de cette portée de bloc. Si j'essaie d'utiliser C en dehors du bloc, je reçois une erreur.

Utilisation de const

La prochaine étape est l'utilisation de const. Si j'utilise const au lieu de let, je créerai une variable constante qui ne peut plus être modifiée.

Si j'essaie de réassigner C après l'assignation const C = 0, on me dit que je ne peux pas assigner une nouvelle valeur à une variable constante.

Objets immuables avec const

Lorsque nous utilisons const pour déclarer un objet, l'objet lui-même peut toujours être modifié, mais pas la référence. Je peux ajouter des éléments à l'objet sans problème supplémentaire.

Meilleures pratiques pour l'utilisation de let et const

Basé sur mon expérience, je recommande d'utiliser const par défaut, sauf si tu es certain que la valeur d'une variable devra être changée plus tard. Cette pratique mène à un code plus lisible et maintenable.

Utilise let lorsque tu as besoin de modifier la valeur à l'intérieur d'une portée de bloc. Un exemple pourrait être une variable compteur dans une boucle.

Résumé – Déclaration de variables en JavaScript : let et const vs var

En résumé, nous avons examiné les différences entre var, let et const. let et const offrent des améliorations essentielles en termes de portée ainsi que de sécurité des variables. Alors que var est globale ou locale à une fonction, let et const garantissent la visibilité au sein d'une portée de bloc. De plus, const assure l'immutabilité de l'assignation, ce qui réduit les bugs et les comportements inattendus dans le code.