Déclarer les variables en JS

Par / Développement, Javascript /
Déclarer les variables en JavaScript : utilisation de var, let et const
var, let, const

Cet article est une traduction française de l’article “var, let & const. What’s the difference ?” de Venkat Iyengar.

Introduction

Commencer avec JavaScript est comme un tour de montagnes russes dès le départ.
Tout commence correctement, avec la connexion de « Hello World » à la console et l’affichage d’un résultat instantané dans le navigateur.
Mieux encore, une alerte ou même une invite qui vous permet de prendre en compte les entrées de l’utilisateur.

A mesure que l’on apprend les concepts, ils semblent tous avoir un sens individuel. Mais les associer et savoir exactement quand utiliser quelle alternative peut souvent être un défi.
Par exemple : l’utilisation d’un type de variable, de fonction ou de boucle.
Une règle d’or à retenir est qu’il existe de nombreuses façons de faire les choses, mais chaque méthode existe toujours pour une raison.
Ce qui signifie que chacune a son cas d’utilisation individuel et connaître la différence peut considérablement améliorer votre efficacité.

La déclaration des variables

Jusqu’à la dernière version de JavaScript EcmaScript 2015, il n’existait qu’un moyen de déclarer une variable : var. Voyons quelques exemples :

var a = 5;
var a = 2

for (var b = 1; b < 30; b++) {
  if (b > a) {
    console.log('c is greater');
  }
}
if ( a === 2) {
  var b = 10;
}
function declareVar () {
  var c = 10;
}

Si vous examinez les 4 manières dont nous avons déclaré les variables à l’aide de var, les variables déclarées dans les 3 premiers cas ont toutes une portée globale. Cela signifie qu’elles sont accessibles n’importe où dans le script.
Ce n’est que si var est déclaré dans une fonction que sa portée devient locale. C’est-à-dire qu’elle est limitée à cette fonction.
En d’autres termes, seules les fonctions peuvent créer de nouvelles étendues tant que nous utilisons var.

Pourquoi est-ce une limitation ?

L’un des problèmes majeurs est que les variables sont globalement accessibles.
Cela signifie que si vous utilisez une autre bibliothèque, elle peut écraser les variables que vous avez définies et qui portent le même nom.
Cela signifie également que si vous souhaitez utiliser le même nom de variable, vous êtes obligé de créer plusieurs fonctions. Ce qui peut permettre de garder une trace beaucoup plus d’une tâche.
Pour l’instant, jetez un œil à ce qui suit :

function start() {
    for (var i = 0; i < 5; i++) {
        console.log(i); //*
    }
    console.log(i); //**
}
start();

Que va t-il va se passer ?
Le résultat sera une liste de nombres de 0 à 5, 5 étant la valeur actuelle à la fin de la boucle.
Cela est dû au fait que la variable définie dans l’instruction for est accessible n’importe où dans la fonction.
Cela peut entraîner de nombreuses erreurs imprévues et complications dans votre code, en particulier lors de l’intégration à des bibliothèques tierces pouvant écraser vos variables.

Avec l’introduction de let et const, nous n’avons plus à craindre que nos variables soient écrasées ou appelées partout, quel que soit le script.
C’est parce que let et const sont ce que l’on appelle des block scoped.
Reprenons l’exemple précédent mais n’effectuons qu’une modification, comme suit :

function start() {
  for (let i = 0; i < 5; i++) {
    console.log(i); //*
  }
  console.log(i); //**
}
start();

Cette fois, ce que nous aurons à la place d’une liste de nombres est une erreur. Et c’est idéalement ce que nous voulons dans un langage robuste.

Pourquoi ?

Parce que le fichier console.log appelant la variable définie (**) n’a plus accès au bloc dans lequel la variable est définie.
La variable n’est accessible qu’à l’intérieur du bloc dans lequel elle a été définie.
C’est ainsi que la programmation fonctionne et devrait fonctionner, tout en maintenant un flux logique d’événements.

Jusqu’à présent, nous avons couvert la différence entre var et let et les avantages qu’il a laissés par rapport à var.
Const a les mêmes propriétés de block-scope que let. La différence est que la valeur d’une variable définie avec const ne peut pas être remplacée.
L’utilisation de const est seulement dans le cas d’une valeur non modifiable, par exemple la valeur de PI. Utiliser const pour définir la valeur de PI est un bon cas d’utilisation car il évite de l’écraser accidentellement.

const PI = 3.141593;
PI = 3.14; // throws " Identifier 'pi' has already been declared"

En conclusion

Avec la version EcmaScript 2015, les nouvelles méthodes de définition des variables nous permettent de garder leur périmètre de blocage, d’éviter de nombreux écrasements pénibles et des retouches conséquentes.
Cela nous permet également de réduire la quantité de code à écrire. Cela nous évite de contenir en permanence les variables let et const dans les fonctions.
Les définitions d’erreurs pour les nouveaux types de variable sont également beaucoup mieux documentées et faciles à comprendre. Ce qui permettra de gagner beaucoup de temps lors du débogage au fil des ans.

En règle générale, restez avec const aussi souvent que vous le pouvez.
Si, pour une raison quelconque, vous devez réaffecter des valeurs, changer pour let.
Le var peut-être traité en dernier recours … à une exception près : lorsque vous exécutez rapidement du code dans la console.
var est plutôt indulgent, ce qui facilite grandement la vérification rapide des sorties, en particulier lorsque vous débutez.

Un exemple simple consiste à réaffecter des valeurs. Prenons l’exemple suivant :

var a = 001;
var a = 002; // no error here, even though we're assigning the value afresh

let a = 001;
let a = 002; //  error: Identifier 'a' has already been declared

Techniquement, var et let peuvent être redéfinis. Mais il n’a pas de sens de pouvoir déclarer deux fois la même variable, comme le permet toujours var.
Ainsi, dans certains cas, var peut être le moyen le plus simple et le plus rapide d’accomplir des tâches, mais pour obtenir un code de qualité satisfaisant et respecter les normes plus récentes de la communauté, veillez à suivre la séquence de const → let → var.

Autres articles sur le sujet