Variable JavaScript : var, let et const expliqués simplement

Quand on débute en JS, il y a une question qui revient presque toujours dès les premières lignes de code. Pourquoi existe-t-il trois mots différents pour déclarer une variable javascript ? Et surtout, lequel faut-il utiliser : var, let ou const ?

• Comprendre quand utiliser var, let ou const sans hésitation ni confusion
• Éviter les erreurs classiques qui provoquent des bugs invisibles et rendent le JavaScript difficile à maîtriser
• Écrire dès maintenant un code plus clair, plus sûr et plus professionnel, conforme aux pratiques modernes en choisissant la bonne variable JavaScript

Si vous vous êtes déjà retrouvé face à un message d’erreur incompréhensible, ou si votre script se comporte de manière étrange sans raison apparente, il y a de fortes chances que le problème vienne de là. Les variables sont au cœur de JavaScript, mais aussi l’une des sources de confusion les plus fréquentes chez les débutants.

Dans ce guide, nous allons prendre le temps de tout reprendre depuis le début. L’objectif est simple : à la fin de cette lecture, vous saurez exactement ce que font var, let et const, pourquoi ils existent plusieurs types de variable javascript, et surtout comment bien les utiliser dans vos projets concrets.

Qu’est-ce qu’une variable JavaScript ?

Avant de comparer var, let et const, il faut comprendre ce qu’est une variable javascript, tout simplement.

Une variable est un espace de stockage qui permet de garder une information en mémoire. Cette information peut être un nombre, un texte, un résultat de calcul, un état, ou même quelque chose de plus complexe comme une liste ou un objet.

Prenons un exemple très simple :

let age = 30;

Ici, vous dites à JavaScript : « Crée une variable qui s’appelle age, et mets dedans la valeur 30 ». À partir de ce moment, vous pouvez réutiliser cette information autant de fois que nécessaire.

console.log(age); // affiche 30

Sans variable, vous seriez obligé de réécrire vos valeurs partout dans le code. Ce serait long, peu lisible, et surtout très difficile à maintenir.

Les variables servent donc à trois choses essentielles : stocker des données, les réutiliser, et rendre votre code plus clair et plus logique.

Pourquoi existe-t-il plusieurs façons de déclarer une variable ?

C’est une excellente question qui mérite une vraie réponse.

À l’origine, JavaScript ne proposait qu’un seul mot-clé pour créer une variable : var. Pendant de nombreuses années, tous les développeurs ont utilisé var, faute de mieux. Le problème, c’est que var a des comportements parfois déroutants, surtout pour les débutants.

Avec le temps, JavaScript a évolué. En 2015, une grande mise à jour du langage a introduit deux nouveaux mots-clés : let et const. Leur but était clair : corriger les défauts de var et rendre le code plus prévisible.

Aujourd’hui, var est encore présent pour des raisons de compatibilité, mais let et const sont devenus la norme dans le JavaScript moderne. Comprendre la différence entre les trois est donc indispensable.

var : l’ancienne manière de déclarer une variable

Commençons par var, puisque c’est l’origine de tout.

Déclarer une variable avec var

Voici un exemple classique :

var prenom = "Alban";

Vous créez une variable appelée prenom et vous lui assignez une valeur. Jusque-là, rien de surprenant. Vous pouvez ensuite modifier cette valeur.

prenom = "Jean";

Avec var, une variable peut être redéclarée sans provoquer d’erreur.

var prenom = "Paul";

JavaScript accepte cette redéclaration sans broncher. Et c’est justement là que les problèmes commencent.

Le problème principal de var : la portée

La notion de portée, ou scope, est fondamentale en JavaScript. Elle définit où une variable est accessible dans le code.

Avec var, la portée est dite « fonctionnelle ». Cela signifie qu’une variable déclarée avec var est accessible partout dans la fonction où elle se trouve, même si elle est déclarée dans un bloc conditionnel.

Regardez cet exemple :

if (true) {
    var message = "Bonjour";
}

console.log(message); // affiche "Bonjour"

Même si la variable message est déclarée à l’intérieur du if, elle reste accessible en dehors. Pour un débutant, ce comportement est souvent contre-intuitif.

Imaginez un instant que vous pensiez limiter une variable à un bloc précis, mais qu’elle se retrouve utilisable ailleurs sans que vous le sachiez. Cela peut provoquer des bugs très difficiles à comprendre.

Un effet secondaire sournois : le hoisting

Avec var, JavaScript effectue ce qu’on appelle le hoisting. Concrètement, cela signifie que la déclaration de la variable est « remontée » en haut du fichier ou de la fonction, même si vous l’avez écrite plus bas.

Prenons un exemple :

console.log(score);
var score = 10;

Ce code ne provoque pas d’erreur. Il affiche undefined. Pourquoi ? Parce que JavaScript interprète le code comme s’il était écrit ainsi :

var score;
console.log(score);
score = 10;

Pour un débutant, ce comportement est très perturbant. On a l’impression que JavaScript lit dans le futur, alors qu’en réalité il applique simplement des règles internes peu intuitives.

let : une déclaration plus logique et plus sûre

Face aux limites de var, let apporte une approche beaucoup plus simple à comprendre.

Déclarer une variable avec let

La syntaxe est quasiment identique :

let compteur = 0;

Vous pouvez modifier la valeur de la variable plus tard.

compteur = compteur + 1;

La différence ne se voit pas encore, mais elle est fondamentale.

La portée de let : le bloc

Avec let, la portée est dite « de bloc ». Cela signifie qu’une variable n’existe que dans le bloc où elle est déclarée.

if (true) {
    let message = "Salut";
}

console.log(message); // erreur

Cette fois, JavaScript vous empêche d’accéder à la variable en dehors du bloc. C’est beaucoup plus logique, et surtout beaucoup plus sûr.

Vous savez exactement où votre variable est utilisable, ce qui réduit considérablement les effets de bord et les bugs inattendus.

let empêche la redéclaration accidentelle

Autre avantage important : vous ne pouvez pas redéclarer une variable let dans le même bloc.

let age = 25;
let age = 30; // erreur

Cette règle peut sembler contraignante au début, mais elle vous protège contre des erreurs très courantes, notamment lorsque le code commence à grandir.

const : la variable qui ne change pas… ou presque

Après avoir découvert var et let, il est temps de parler de const. C’est probablement le mot-clé le plus utilisé aujourd’hui en JavaScript moderne, et pourtant aussi l’un des plus mal compris par les débutants.

Déclarer une variable avec const

La syntaxe est toujours aussi simple :

const site = "Créa-Blog";

Dès la déclaration, une règle essentielle s’impose : une variable déclarée avec const doit obligatoirement avoir une valeur immédiatement.

const score; // erreur

JavaScript vous empêche de créer une constante « vide ». C’est logique, car const est conçu pour représenter une valeur qui ne doit pas changer par la suite.

Ce que const interdit vraiment

Lorsque vous utilisez const, vous ne pouvez pas réassigner la variable.

const age = 40;
age = 41; // erreur

Ici, JavaScript bloque volontairement l’opération. Cela permet de garantir que certaines valeurs importantes ne seront jamais modifiées par erreur au cours de l’exécution du programme.

C’est très utile pour des informations comme des paramètres, des configurations, des sélecteurs HTML, ou encore des valeurs de référence.

La grande confusion des débutants avec const

C’est souvent ici que les choses se compliquent. Beaucoup de débutants pensent que const signifie « valeur totalement figée ». En réalité, ce n’est pas exactement ça.

Regardez cet exemple :

const utilisateur = {
    nom: "Alban",
    age: 43
};

utilisateur.age = 44;

Ce code fonctionne parfaitement. Et c’est là que la confusion apparaît. Comment peut-on modifier une variable déclarée avec const ?

La réponse est simple : const empêche la réaffectation de la variable, pas la modification de son contenu.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Dans cet exemple, la variable utilisateur pointe toujours vers le même objet. Ce qui change, ce sont les propriétés internes de cet objet. JavaScript considère que la référence reste identique, donc la règle de const est respectée.

Même logique avec les tableaux :

const langages = ["HTML", "CSS", "JS"];
langages.push("PHP");

Vous modifiez le contenu du tableau, mais pas la variable elle-même. C’est autorisé.

En revanche, ceci est interdit :

langages = ["Python", "Java"];

Ici, vous essayez de remplacer complètement la référence, et JavaScript refuse.

Pourquoi const est devenu la valeur par défaut

Dans la majorité des cas, une variable n’a pas vocation à changer de référence. Et quand elle doit changer, vous le savez explicitement.

Utiliser const par défaut apporte plusieurs avantages. Votre code devient plus lisible, car on comprend immédiatement quelles valeurs sont censées rester stables. Vous réduisez aussi le risque d’erreurs involontaires, surtout dans des fichiers longs ou collaboratifs.

C’est pour cette raison que de nombreux développeurs appliquent aujourd’hui une règle simple : const par défaut, let seulement quand c’est nécessaire, et var presque jamais.

Comparaison claire entre var, let et const

Maintenant que les trois mots-clés ont été présentés séparément, il est temps de les comparer de manière concrète, sans tableau complexe ni jargon.

var est ancien, permissif, et parfois imprévisible. Sa portée est limitée à la fonction, il accepte la redéclaration, et son hoisting peut produire des comportements déroutants. Il fonctionne encore, mais il est rarement recommandé dans un projet moderne.

let est plus strict, plus logique, et beaucoup plus intuitif pour un débutant. Sa portée est limitée au bloc, il empêche la redéclaration accidentelle, et son comportement correspond davantage à ce que l’on attend instinctivement.

const va encore plus loin en sécurisant le code. Il garantit que la variable ne sera jamais réassignée. C’est un garde-fou très précieux, surtout lorsque le projet commence à prendre de l’ampleur.

Quand utiliser let plutôt que const ?

Une question revient souvent : si const est si bien, pourquoi utiliser let ?

La réponse est simple. let est indispensable lorsque la valeur doit évoluer dans le temps. Prenons un compteur :

let compteur = 0;

compteur = compteur + 1;
compteur = compteur + 1;

Ici, const ne fonctionnerait pas, car vous devez modifier la valeur à chaque étape. let est parfaitement adapté à ce type de situation.

Même chose pour une boucle :

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

La variable i change à chaque tour de boucle. let est donc le bon choix.

Bonnes pratiques pour écrire du JavaScript propre

Si vous débutez, adopter de bonnes habitudes dès maintenant vous fera gagner énormément de temps plus tard.

Déclarez toujours vos variables avec const par défaut. Si JavaScript vous empêche de modifier la valeur et que vous en avez réellement besoin, passez alors à let. Évitez var sauf si vous travaillez sur un ancien code ou que vous savez exactement pourquoi vous l’utilisez.

Prenez aussi l’habitude de déclarer vos variables au moment où vous en avez besoin. Cela rend le code plus lisible et plus facile à comprendre, surtout lorsque vous le relirez plusieurs semaines plus tard.

Enfin, donnez des noms clairs à vos variables. var, let et const ne font pas de miracle si la variable s’appelle x ou data sans contexte.

Exemples concrets de choix de variable javascript

Pour bien comprendre var, let et const, rien ne vaut des exemples proches de ce que vous allez réellement coder dans vos projets.

Exemple avec une interaction utilisateur

Imaginons un bouton qui compte le nombre de clics.

let nombreDeClics = 0;

button.addEventListener("click", function () {
    nombreDeClics++;
    console.log(nombreDeClics);
});

Ici, let est indispensable. La valeur évolue à chaque interaction. Utiliser const bloquerait le fonctionnement du script. var fonctionnerait aussi, mais sans offrir la sécurité et la clarté de let.

À l’inverse, le sélecteur HTML ne change pas :

const button = document.querySelector("#btn");

Ce bouton restera le même tout au long du script. const est donc le choix le plus logique.

Exemple avec un calcul simple

Prenons un calcul de prix avec une taxe fixe.

const TVA = 0.20;
let prixHT = 100;

let prixTTC = prixHT + (prixHT * TVA);

La TVA ne change jamais. Elle est définie une fois pour toutes. const est parfaitement adapté. Le prix hors taxe peut évoluer, donc let est utilisé.

Ce genre de distinction rend votre code plus parlant. On comprend immédiatement quelles valeurs sont stables et lesquelles peuvent changer.

Les erreurs les plus fréquentes quand on débute

Certaines erreurs reviennent très souvent chez les débutants. Les connaître vous permettra de les éviter dès maintenant.

L’une des plus courantes consiste à utiliser var par habitude, sans comprendre ses effets. Le code fonctionne, mais le comportement devient difficile à anticiper à mesure que le projet grandit.

Une autre erreur classique est de déclarer toutes les variables avec let, même quand elles ne changent jamais. Ce n’est pas dramatique, mais vous perdez un avantage important de const : la sécurité.

Enfin, beaucoup de débutants pensent que const empêche toute modification. Cette incompréhension mène parfois à des contournements inutiles, alors que le fonctionnement des objets et des tableaux est parfaitement logique une fois expliqué.

Comprendre la portée pour éviter les bugs invisibles

La portée est souvent responsable de bugs discrets, mais très frustrants.

Regardez cet exemple :

let message = "Bonjour";

if (true) {
    let message = "Salut";
    console.log(message);
}

console.log(message);

Le premier affichage montre « Salut », le second « Bonjour ». Ce ne sont pas la même variable, même si elles portent le même nom. Grâce à let, chaque bloc a sa propre portée.

Avec var, ce genre de code aurait produit un résultat totalement différent, et souvent inattendu. C’est précisément pour cette raison que let et const ont été introduits.

var est-il encore utile aujourd’hui ?

Dans un projet moderne, la réponse est simple : presque jamais.

var reste présent pour maintenir la compatibilité avec d’anciens scripts ou certaines bases de code historiques. Mais si vous débutez aujourd’hui, vous n’avez aucune bonne raison de l’utiliser volontairement.

Apprendre var permet surtout de comprendre les erreurs du passé et d’apprécier les améliorations apportées par let et const.

Une règle simple à retenir

Si vous deviez retenir une seule règle de cet article, ce serait celle-ci.

Utilisez const par défaut. Si JavaScript vous empêche de modifier une valeur et que cette modification est nécessaire, utilisez alors let. Évitez var dans vos nouveaux projets.

Cette approche est utilisée par la majorité des développeurs professionnels. Elle rend le code plus clair, plus sûr, et plus agréable à maintenir.

Comprendre var, let et const, ce n’est pas seulement apprendre trois mots-clés. C’est comprendre comment JavaScript pense, comment il gère la mémoire, et comment éviter des erreurs qui peuvent vous faire perdre un temps précieux.

En choisissant consciemment entre let et const, vous écrivez déjà du JavaScript moderne, lisible et professionnel. Vous montrez aussi que vous maîtrisez les bases, ce qui fait toute la différence lorsqu’un projet commence à grandir.

Le plus important reste la pratique. Testez, cassez votre code, observez les erreurs, puis corrigez-les. C’est en expérimentant que ces notions deviendront naturelles. Et un jour, sans même y penser, vous écrirez const, let… et vous sourirez en repensant à l’époque où var vous semblait indispensable. C’est tous pour les types de variable Javascript …

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr