![Image de couverture - Différences entre Let, Var et Const en JavaScript](/images/articles/differences-let-var-const-js/cover.jpg)
Différences entre Let, Var et Const en JavaScript
Déclarer des variables en JavaScript peut se faire avec plusieurs mots-clés. Coannaissez-vous les différences entre let, var et const ?
Dans cet article, nous allons explorer les différentes façons de déclarer des variables en JavaScript, en mettant l’accent sur les trois mots-clés principaux : let
, var
et const
.
Déclaration de variables
Les variables sont une composante essentielle de tout langage de programmation car elles permettent de stocker des données que l’on souhaite manipuler au cours de l’exécution du programme.
Une variable est une case mémoire étiquetée par un nom, facilitant le stockage et l’utilisation de données.
Historiquement, la déclaration de variables en JavaScript n’était possible qu’avec le mot-clé var
.
Mais depuis 2015, l’apparition des mots-clés let
et const
dans la version ECMAScript 6 a changé la donne.
3 mots-clés pour déclarer des variables en JS
let
Portée
Le mot-clé let
permet de définir une variable locale.
Ces variables ont une portée de bloc, c’est-à-dire qu’elles ne sont accessibles qu’au sein du bloc de code dans lequel elles sont définies. Un bloc est délimité par des accolades {}
(if
, for
, function
…).
if (true) {
let firstname = 'toto';
}
console.log(firstname); // ❌ firstname is not defined
Redéclaration
Une variable déclarée avec let
ne peut pas être redéclarée dans la même portée.
let firstname = "toto"
let firstname = "tutu" // ❌ Identifier 'firstname' has already been declared
Réassignation
Il est possible de modifier la valeur/la référence d’une variable déclarée avec let
.
let firstname = "toto"
firstname = "tutu"
console.log(firstname) // ✅ Affiche "tutu"
var
Portée
Le mot-clé var
permet de définir une variable globale.
Ces variables ont une portée de fonction, c’est-à-dire qu’elles sont accessibles dans la fonction dans laquelle elles sont définies, ou à l’ensemble global si elles sont déclarées en dehors de toute fonction.
if (true) {
var firstname = 'toto';
}
console.log(firstname); // ✅ Affiche "toto"
Redéclaration
Une variable déclarée avec var
peut être redéclarée dans la même portée.
var firstname = "toto"
var firstname = "tutu"
console.log(firstname) // ✅ Affiche "tutu"
Réassignation
Il est possible de modifier la valeur ou la référence d’une variable déclarée avec var
.
var firstname = "toto"
firstname = "tutu"
console.log(firstname) // ✅ Affiche "tutu"
const
Portée
Le mot-clé const
permet de définir une constante, c’est-à-dire une variable dont la valeur ou la référence ne change pas.
Ces constantes ont une portée de bloc, c’est-à-dire qu’elles ne sont accessibles qu’au sein du bloc de code dans lequel elles sont définies. Un bloc est délimité par des accolades {}
(if
, for
, function
…).
if (true) {
const firstname = 'toto';
}
console.log(firstname); // ❌ firstname is not defined
Redéclaration
Une constante déclarée avec const
ne peut pas être redéclarée dans la même portée.
const firstname = "toto"
const firstname = "tutu" // ❌ Identifier 'firstname' has already been declared
Réassignation
Il n’est pas possible de modifier la valeur/la référence d’une constante déclarée avec const
.
const firstname = "toto"
firstname = "tutu" // ❌ Assignment to constant variable
S’il n’est pas possible de réassigner une variable, il est néanmoins possible d’en modifier les composantes (mais pas la nature) s’il s’agit d’un objet ou d’un tableau.
const languages = ["HTML", "CSS", "JavaScript"]
languages = ["HTML", "CSS", "JavaScript", "PHP"] // ❌ Assignment to constant variable.
languages[3] = ["PHP"] // ✅ OK
languages.push("PHP") // ✅ OK
Pourquoi est-il recommandé d'utiliser const
le plus souvent possible ?
Le mot-clé const
est optimal car :
- Sécurité : Les variables définies avec const ne peuvent pas être réassignées, ce qui réduit le risque d’erreurs liées à des réassignations accidentelles.
- Optimisation : Les moteurs d’exécution JavaScript peuvent appliquer des optimisations supplémentaires pour les variables const car ils savent que leur valeur ne changera pas.
- Lisibilité : Utiliser const signale clairement aux autres développeurs que la variable ne sera pas modifiée, ce qui améliore la lisibilité du code.
let VS var VS const : tableau comparatif
Choisir entre let, var ou const dépend donc de la portée, des mécaniques de redéclaration et réassignation que vous envisagez pour vos variables. Voici un tableau récapitulant ces caractéristiques.
Caractéristique | let | var | const |
---|---|---|---|
Portée | Bloc | Fonction ou globale | Bloc |
Redéclaration | Interdite | Permise | Interdite |
Réassignation | Permise | Permise | Interdite (sauf propriétés d’objets/éléments de tableaux) |
Hoisting | Non initialisé | Initialisé à undefined | Non initialisé |
Utilisation courante | Variables locales | Variables globales - usage déconseillé | Constantes |
Vous connaissez désormais les différences entre let, var et const en JS, pour écrire du code plus propre et sûr.