Différences entre Let, Var et Const en JavaScript

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

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.