let vs const vs var
const et let ont une portée de bloc, var une portée de fonction, et const interdit la réaffectation. Écrivez const par défaut, let pour les valeurs qui changent.
Comparaison point par point
#Portée
Réaffectation
Nouvelle déclaration dans la même portée
Référence avant la déclaration
Valeur à la déclaration
Variable dans une boucle avec un callback
Quand l’utiliser
Exemple
#const course = 'JavaScript'
let level = 1
level = level + 1
if (level > 1) {
var visible = 'var est visible hors du bloc'
let hidden = 'let existe seulement dans le bloc'
}
console.log(course, level)
console.log(visible)
console.log(typeof hidden)Définition et utilisation
#Les trois mots-clés déclarent des variables, mais ils diffèrent par leur portée, la possibilité de réaffectation et leur comportement avant la déclaration. let et const sont arrivés dans le langage avec ES2015 et ont une portée de bloc : ils n’existent que dans les accolades où ils ont été déclarés. var a une portée de fonction, donc il sort des blocs if et des boucles.
const n’autorise pas à affecter une nouvelle valeur à la variable, mais ne gèle pas l’objet : vous pouvez toujours ajouter un élément à un tableau déclaré avec const. let autorise la réaffectation. Jusqu’à l’endroit de leur déclaration, les deux sont dans ce qu’on appelle la zone morte temporelle (temporal dead zone), donc y faire référence avant lève une ReferenceError. La déclaration var est remontée (hoisting) au début de la fonction et vaut undefined jusqu’à l’affectation.
Règle pratique : const par défaut, let seulement pour les valeurs qui changent vraiment (compteurs, sommes dans une boucle), et var jamais. Vous le rencontrerez dans d’anciens projets et d’anciennes réponses sur les forums, donc il est utile de comprendre ce qui le distingue.
Syntaxe
#const name = value
let name = value
var name = valuePlus d’exemples
#const skills = ['HTML']
skills.push('CSS')
console.log(skills)
try {
skills = []
} catch (error) {
console.log(error.name)
}Vous pouvez modifier le contenu d’un tableau ou d’un objet, mais pas l’affectation elle-même. Pour geler un objet, utilisez Object.freeze().
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log('var', i), 0)
}
for (let j = 0; j < 3; j++) {
setTimeout(() => console.log('let', j), 0)
}Toutes les fonctions de la première boucle voient la même variable i, qui vaut 3 après la boucle. let crée une nouvelle variable à chaque itération.
try {
console.log(points)
let points = 10
} catch (error) {
console.log(error.name)
}
console.log(bonus)
var bonus = 5Bonnes pratiques
#- Commencez par
constet passez àletseulement quand l’éditeur ou le linter signale une tentative de réaffectation. - Les règles ESLint
prefer-constetno-varfont respecter cette règle dans tout le projet. - La portée de bloc de
letetconsts’applique à chaque bloc :if, boucles,tryet accolades autonomes.
Entrées associées
#- constDéclare une constante à portée de bloc. Une telle variable ne peut pas recevoir une nouvelle valeur.
- letDéclare une variable à portée de bloc, dont la valeur peut être modifiée plus tard.
- varDéclare une variable à portée de fonction. C’est l’ancienne façon, remplacée aujourd’hui par let et const.
- forUne boucle avec compteur : initialisation, condition et étape. Répète un bloc de code tant que la condition est vraie.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.