Tips JavaScript #1 : zoom sur var, let et const

On le sait, les langages de programmation évoluent sans cesse. Entre petites améliorations et grosses révolutions, chaque mise-à-jour apporte son lot de changements. Et le JavaScript ne fait pas exception.

En tant que développeur JavaScript, rester au fait des dernières tendances et évolutions est incontournable. Non seulement cela vous permet d’améliorer la qualité de votre code et de rester un expert dans votre domaine, mais en plus cela vous apporte de la crédibilité auprès de vos (futurs) clients.

Je vous propose une série de petits tutoriels sur des notions très intéressantes en JavaScript. Et aujourd’hui, commençons avec la définition des variables via les mots clés var, let et const. C’est parti !

Définir une variable JavaScript avec le mot clé var

Historiquement, on utilisait le mot clé var pour définir ses variables en JavaScript.

Déclaration d’une variable avec var

Voici un exemple tout simple :

var ma_variable = "ma valeur";
console.log(ma_variable); // ma valeur

Il est également possible de ne pas définir de valeur initiale à une variable. Elle retourne alors le résultat « undefined ». Exemple :

var ma_variable;
console.log(ma_variable); // undefined

Portée d’une variable avec var

Une variable définie avec le mot clé var est disponible uniquement dans le contexte dans lequel elle est déclarée :

• Si elle est définie dans une fonction, sa portée se limite à cette même fonction,
• Si elle est définie en dehors de toute fonction, elle est alors référencée dans l’objet global du script.

Exemples :

var ma_variable = "ma valeur";
function ma_fonction() {
var deuxieme_variable = "autre valeur";
console.log(ma_variable); // ma valeur
console.log(deuxieme_variable); // autre valeur
}
console.log(ma_variable); // ma valeur
console.log(deuxieme_variable); // erreur

Dans cet exemple, le dernier console.log retourne eune erreur, car la portée de la variable deuxieme_variable se limite à la fonction ma_fonction() dans laquelle elle a été déclarée.

Redéfinir une variable avec var

En utilisant le mot clé var, il est possible de redéfinir une même variable à de multiples reprises. Exemple :

var ma_variable = 10;
console.log(ma_variable); // 10
var ma_variable = "Freelance Talks";
console.log(ma_variable); // Freelance Talks
var ma_variable = true;
console.log(ma_variable); // true

Cela apporte certes beaucoup de flexibilité, mais cela peut également devenir une véritable source de problème pour le développeur freelance JavaScript. En effet, il est très facile d’écraser une variable sans s’en rendre compte ! De quoi s’arracher les cheveux lors du débugage…

Conclusion : quand utiliser var pour définir ses variables JS ?

Une seule réponse : jusqu’en juin 2015 x)

Eh oui, désormais, l’utilisation de var est déconseillée dans la plupart des cas, bien qu’elle fonctionne toujours. Désormais, il est plutôt recommandé d’utiliser les mots clés let et const pour définir vos variables.

Et je vous explique comment :

Définir une variable JavaScript avec le mot clé let

Depuis Juin 2015 et l’arrivée de la mise-à-jour ES6, on utilise donc plutôt le mot clé let pour définir les variables en JavaScript.

Déclaration d’une variable avec let

La déclaration fonctionne comme avec var :

let ma_variable = "ma valeur";
console.log(ma_variable); // ma valeur

Il y a toutefois 2 différences majeures : la portée, et la redéfinition. Voyons cela :

Redéfinir une variable avec let

Avec let, il est possible d’assigner une nouvelle valeur à une variable plus loin dans le code. En revanche, il est impossible de la re-déclarer. On évite ainsi le problème d’écrasement de variable qu’on avait avec var.

Exemple :

let ma_variable = 10;
console.log(ma_variable); // 10
ma_variable = true; // true
let ma_variable = "Je suis freelance"; // Uncaught SyntaxError: Identifier 'ma_variable' has already been declared

Portée d’une variable avec let

Voyons maintenant une autre subtilité de let : sa portée. En effet, avec let nous avons une portée de bloc.

Et parce qu’un exemple vaut plus que mille mots :

let verif = true;
if (verif) {
  let ma_variable = 10;
  console.log(ma_variable); // 10
}
console.log(ma_variable); // Uncaught ReferenceError: ma_variable is not defined

Dans cet exemple, la variable a été définie au sein du bloc if. Le premier console.log, situé dans ce même bloc, y a donc bien accès. En revanche, le second console.log est situé en dehors du bloc if : il n’a donc pas accès à cette variable, et retourne une erreur.

Attention cependant : il est tout à fait possible d’avoir deux variables avec le même nom, dans deux scopes différents. Voici un exemple :

let verif = true;
let ma_variable = "Freelance Talks";
if (verif) {
let ma_variable = 10;
console.log(ma_variable); // 10
}
console.log(ma_variable); // Freelance Talks

Dans cet exemple, ma_variable vaut 10 dans le bloc if, et « Freelance Talks » en dehors.

Notez qu’il est également possible de créer un bloc en utilisant simplement des accolades, comme ici :

let ma_variable = true;
console.log(ma_variable); // true
{
let ma_variable = 10;
console.log(ma_variable); // 10
ma_variable = "Freelance Talks";
console.log(ma_variable); // Freelance Talks
}
console.log(ma_variable); // true

Dans cet exemple, nous avons deux variables distinctes portant le même nom. A l’extérieur du bloc d’accolades, elle est définie à true. A l’intérieur du bloc, elle est définie à 10, puis à Freelance Talks.

Voyons maintenant ce qu’il se passe si nous supprimons la première ligne, comme ici :

{
let ma_variable = 10;
console.log(ma_variable); // 10
ma_variable = "Freelance Talks";
console.log(ma_variable); // Freelance Talks
}
console.log(ma_variable); // Uncaught ReferenceError: ma_variable is not defined

Pour terminer sur cette partie, j’aimerais vous soumettre un petit cas particulier : le cas du switch. Regardez ce script :

switch (i) {
case 0:
let ma_variable = 1;
break;

case 1:
let ma_variable = "Freelance Talks"; // Uncaught SyntaxError: Identifier 'ma_variable' has already been declared
break;
}

Eh oui, ce code retourne une erreur parce qu’on considère qu’il n’y a qu’un seul bloc implicite : le bloc switch. De ce fait, utiliser let pour définir votre variable vous sortira une erreur.

Pour remédier à ce problème, je vous propose une petite astuce :

switch (i) {
case 0: {
let ma_variable = 1;
break;
}
case 1: {
let ma_variable = "Freelance Talks"; 
break;
}
}

Comme vous pouvez le voir, le fait d’ajouter des accolades ici a permis de définir une nouvelle portée. Le code ci-dessus ne va donc pas générer d’erreur.

Conclusion : quand utiliser let pour définir ses variables JS ?

Là encore, la réponse est simple : dès que votre variable est amenée à voir sa valeur modifiée. Vous l’utiliserez donc très souvent. D’ailleurs, les développeurs JavaScript aiment dire : « let is the new var » :p

Si toutefois vous n’avez pas prévu de modifier la valeur de la variable, utilisez plutôt le mot clé const. Voyons maintenant comment il fonctionne :

Définir une variable JavaScript avec le mot clé const

Si vous utilisez le mot clé const pour définir votre variable, vous créez en réalité une référence constante accessible en lecture seule, qui pointe vers une adresse stockée en mémoire.

Déclaration d’une variable avec const

Voici comment définir une variable avec const :

const ma_variable = 10;
console.log(ma_variable); // 10

Attention, la valeur doit être initialisée lors de l’utilisation de const, sinon vous aurez une erreur. Démonstration :

const ma_variable;
ma_variable = 10; // Uncaught SyntaxError: Missing initializer in const declaration

Portée d’une variable avec const

Comme avec let, la portée d’une variable constante se limite au bloc dans lequel elle a été initialisée.

const langage = "Javascript";
{
const ma_variable = 10;
console.log(ma_variable); // 10
console.log(langage); // JavaScript
}
console.log(ma_variable); // Uncaught ReferenceError: ma_variable is not defined
console.log(langage); // JavaSCript

Redéfinir une variable avec const

La valeur d’une constante ne peut pas être modifiée par une réaffectation. Une constante ne peut être déclarée qu’une seule fois.

Aussi, les codes suivants retournent une erreur :

const ma_variable = 10;
const ma_variable = 20; // Uncaught SyntaxError: Identifier 'ma_variable' has already been declared 

const ma_variable = 10;
ma_variable = 20; // Uncaught TypeError: Assignment to constant variable

Il y a toutefois une petite nuance à bien comprendre : rappelez-vous, en créant une constante on créé en fait une référence à une variable stockée quelque part en mémoire. Dans le cadre d’un tableau ou d’un objet, il est donc possible de modifier les valeurs qu’il contient : la référence elle-même n’est pas modifiée, seulement ses propriétés.

Exemple avec un tableau :

const TVA = [20];
console.log(TVA); // [20]
TVA.push(10);
console.log(TVA); // [20, 10]

Exemple avec un objet :

const article = {
categorie: "Tutoriels",
titre: "Comprendre var, let et const en JavaScript",
niveau: "débutant"
}
console.log(article); // { categorie: "Tutoriels", titre: "Comprendre var, let et const en JavaScript", niveau: "débutant" }

article.niveau = "intermédiaire";
console.log(article); // { categorie: "Tutoriels", titre: "Comprendre var, let et const en JavaScript", niveau: "intermédiaire" }

Conclusion : quand utiliser const pour définir ses variables JS ?

En JavaScript, on utilise donc le mot clé const pour définir des constantes. Le reste du temps, on lui préfèrera donc let.

Var, let et const : le récap !

	VAR	LET	CONST
Portée globale	Oui	Non	Non
Portée de fonction	Oui	Oui	Oui
Portée de bloc	Non	Oui	Oui
Peut être redéclarée	Oui	Non	Non
Peut être réassignée	Oui	Oui	Non

J’espère que ce petit tutoriel JavaScript vous a plu et vous a été utile ! N’hésitez pas à poster un commentaire si vous avez une question, ou tout simplement pour me proposer d’autres idées de sujets à aborder lors des prochains tutoriels 🙂