Image de couverture - Différences entre Let, Var et Const en JavaScript

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 ?

Icône de calendrier
Icône de chronomètre 4 min

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…).

copié !
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.

copié !
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.

copié !
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.

copié !
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.

copié !
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.

copié !
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…).

copié !
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.

copié !
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.

copié !
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.

copié !
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éristiqueletvarconst
PortéeBlocFonction ou globaleBloc
RedéclarationInterditePermiseInterdite
RéassignationPermisePermiseInterdite (sauf propriétés d’objets/éléments de tableaux)
HoistingNon initialiséInitialisé à undefinedNon initialisé
Utilisation couranteVariables localesVariables 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.

Lire aussi