Différences entre var, let et const en JavaScript

Déclaration des variables

En JavaScript il est possible de déclarer des variables de plusieurs façons. On peut utiliser les mots-clés var, let et const. Le mot-clé var est utilisé depuis longtemps, mais est amené à disparaître progressivement dans les codes JavaScript pour être remplacé par let et const.

Néanmoins ce n’est pas une obligation. On peut si on le souhaite encore employer var. Mais ce n’est pas forcément une bonne pratique.

La principale différence réside dans la portée des variables (zone dans laquelle une variable est utilisable).

Mots-clés var

Nous pouvons donc utiliser le mot clé var pour déclarer une variable. Mais voyons ensemble quelle est sa portée dans un code JavaScript.

// Bloc (boucle et condition)
{

  // Déclaration de la variable
  var couleur1 = 'rouge';

}

// Fonction
(function() {

  // Déclaration de la variable
  var couleur2 = 'jaune';

})();

console.log(couleur1); // Fonctionne: rouge apparaît dans la console
console.log(couleur2); // Ne fonctionne pas: une erreur apparaît (couleur2 is not defined)

Dans ce bout de code, on déclare deux variables à deux endroits différents. Il y en a une que l’on place dans un bloc et l’autre dans une fonction (que l’on n’exécute juste après).

On peut donc vérifier la portée de la variable lorsque l’on utilise var. Une variable déclarer avec var, sera accessible dans le scope parent lorsque celle-ci est déclarée dans un bloc, mais pas dans une fonction.

Voyons maintenant les différences avec le mot-clé let.

Mot-clé let

Utilisons le même exemple, mais avec le mot-clé let.

// Bloc (boucle et condition)
{

  // Déclaration de la variable
  let couleur1 = 'rouge';

}


// Fonction
(function() {

  // Déclaration de la variable
  let couleur2 = 'jaune';

})();


console.log(couleur1); // Ne fonctionne pas: une erreur apparaît (couleur1 is not defined)
console.log(couleur2); // Ne fonctionne pas: une erreur apparaît (couleur2 is not defined)

En observant le code, on comprend très rapidement les différences entre un var et un let. C’est la portée de la variable dans un bloc. Dans une fonction, aucun changement. Mais dans un bloc la variable est inaccessible dans le scope parent contrairement à un var.

Mais il reste un troisième mot-clé. C’est const.

Mot-clé const

La portée de la variable est identique entre un const et un let.

Mais il y a quand même une différence.

let couleur1 = 'rouge';
const couleur2 = 'jaune';


couleur1 = 'vert'; // L’affection fonctionne
couleur2 = 'rose'; // Impossible d’affecter une NOUVELLE valeur à une const

Il est impossible d’affecter une nouvelle valeur à une variable déclarer avec const.

Particularité avec les objets

Comme on l’a vu, il est impossible de remplacer une valeur dans un const. Mais curieusement il est possible de changer une propriété d’un objet enregistrée dans une variable const.

const couleurs = {

  premiere: 'jaune',
  deuxieme: 'rouge',

}

couleurs.premiere = 'rose'; // Fonctionne

console.log(couleurs); // { premiere: "rose", deuxieme: "rouge" } apparaît

Que choisir entre var, let et const

De nombreux développeurs ont complètement abandonné le mot-clé var pour les nouveaux projets. Lorsqu’ils créent une variable qui ne sera jamais modifiée, ils utilisent const sinon c’est let qui est choisi.