Javascript variables: var, let ou const

Si vous avez déjà fais du Javascript avant ES6 et que vous n'avez pas coder avec ES6+, le mot clé let ne doit rien vous dire. Dans ce tutoriel nous allons apprendre deux nouvelles manières de créer des variables en Javascript (ES6+), mais aussi voir la différence entre les mots clés var, let et const.

Le mot clé var

C'est le mot clé le plus ancien et celui qu'il faut éviter le plus possible ou même le retirer carrément de vos programmes Javascript. On dit qu'il est function scoped, c'est à dire que sa portée se limite à une fonction, à l'intérieur d'une fonction. Voyons un exemple:

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

console.log(i) // 5

Ici à la sortie de la boucle, la variable i vaut 5 et existe bien donc.

Que va-t'il se passer ici alors?

function hello() {
    var name = 'Diallo'
    console.log(`Hello ${name}`) // Hello Diallo
}

hello()

console.log(name) // ReferenceError: name is not defined

Nous essayons donc d'accéder à une variable définie dans une fonction avec le mot clé var en dehors de la fonction, Javascript lève donc une erreur ReferenceError disant que la variable name n'est pas défini.

ReferenceError: name is not defined

Les variables défini avec le mot clé var ne sont accessibles que dans la fonction dans laquelle elles sont définies.

L'utilisation du mot clé var emmène à beaucoup de confusion, parce que la variable peut ou pas être assigné, il faut donc l'éviter le plus possible.

Le mot clé let

C'est la nouveauté de Javascript, contrairement au mot clé var, le mot clé let est dit block scoped, c'est à dire que la variable n'est accessible que dans le bloc dans lequel il est défini. Un bloc c'est ce qui se trouve entre { et }, c'est le cas des boucles, du if mais aussi des fonctions. Il est tellement simple et ne pose pas du tout de problèmes à partir du moment ou il n'est plus accessible en dehors du bloc.

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

console.log(i) // ReferenceError: i is not defined

Ici la variable i n'est accessible que dans la boucle for, en dehors elle n'est plus accessible.

Le mot clé const

Vous avez des variables qui ne changeront jamais dans votre programme? Utilisez le mot clé const, comme pour définir la TVA ou la valeur de pi par exemple: la TVA restera la même durant toute l'exécution de votre programme, ainsi que la valeur de pi.

const TVA = 0.18
console.log(TVA) // 0.18

TVA = 0.180 // TypeError: Assignement to constant variable

Sur la ligne 3 on essaie de redéfinir la valeur de la TVA, ce qui n'est pas permis et on a donc une erreur TypeError.

Attention

Avec let et const, n'essayez pas d'accéder à une variable que vous n'avez pas défini avant, cela va générer une erreur ReferenceError disant que la variable n'est pas défini.

console.log(a) // ReferenceError: a is not defined
let a = 5

console.log(pi) // ReferenceError: pi is not defined
const pi = 3.14

console.log(b) // undefined
var b = 5

Remarquez bien qu'avec la variable b défini avec le mot clé var, la variable existe mais n'est pas défini.

Il faut savoir avant tout que les variables déclarées avec le mot clé var ou let ont par défaut la valeur undefined si seulement on les a pas encore initialisé. Bon voyons ça en en pratique:

var number
console.log(number) // undefined
number = 4
console.log(number) // 4

Je crois que c'est un peu plus claire maintenant. Il y a la déclaration de la variable avec:

var number

Nous créons donc un identifiant qui s'appel number. Puis nous essayons de l'afficher et nous avons donc undefined, la variable est déclarer mais ne contient rien.

Sur la ligne 3, nous affectons la valeur 4 à notre variable number.

Si vous déclarez une variable avec le mot clé const, il faut toujours l'affecter dès le départ, sinon vous avez une erreur SyntaxError.

Conclusion

Comme je l'ai dit, il faut à tout prix éviter le mot clé var et privilégié let ou const. Si vous avez des variables qui ne vont pas changer, utilisez donc const, sinon utilisez let.