JavaScript var : l’incroyable vérité sur la déclaration de variables (que vous devez savoir !)

Alors, tu veux déclarer une variable javascript ? T’as entendu parler de var et tu te demandes ce que c’est que ce truc ? Accroche-toi, on va démystifier ce vétéran du JavaScript. La faire courte : var est l’ancienne façon de déclarer des variables en JS. Aujourd’hui, on utilise plutôt let et const parce que var a des comportements… disons… surprenants. Mais comprendre var, c’est comprendre une partie de l’histoire de JS et pourquoi les choses sont comme elles sont aujourd’hui.

Pour déclarer une variable javascript avec var, c’est simple comme bonjour : var nomDeVariable = valeur;. Par exemple, var score = 100;. Et pour afficher cette variable javascript ? Le plus souvent, on utilise console.log(nomDeVariable);. Donc, console.log(score); affichera 100 dans la console de ton navigateur. Facile, non ? Le piège ? La portée (scope) et le « hoisting » de var peuvent te jouer des tours pendables. C’est pour ça qu’on préfère ses petits frères let et const.

var javascript : Les bases pour les débutants pressés

Si t’es un java script debutant, retiens ça : une variable, c’est comme une boîte étiquetée où tu stockes une information (un nombre, du texte, etc.). L’étiquette, c’est le nom de la variable, et var, let, ou const, c’est le mot magique pour dire à JavaScript : « Hé, je crée une nouvelle boîte ! ».

Avec var, cette boîte a des règles un peu « old school ». Imagine une boîte qui peut être vue de très loin (portée globale ou de fonction) et dont l’étiquette existe avant même que tu aies fini de la coller (hoisting). Ça peut créer du désordre !

En résumé rapide :

• Déclaration : var maVariable; ou var maVariable = "Salut !";
• Affichage simple : console.log(maVariable);
• Le hic : Sa gestion de la portée et le hoisting.
• L’alternative moderne : Utilise let pour les variables qui peuvent changer de valeur et const pour celles qui ne changeront pas. C’est plus propre, plus sûr, et tes collègues te remercieront. (Voir Comprendre let et const).

Déclarer une variable javascript avec var : La syntaxe à l’ancienne

Ok, entrons un peu plus dans le cambouis. Déclarer une variable javascript avec var suit une syntaxe simple : le mot-clé var, suivi du nom que tu veux donner à ta variable, et éventuellement une valeur initiale avec le signe =.

var message; // Déclare une variable nommée 'message', sans valeur initiale (elle vaut 'undefined')
var utilisateur = "SuperDev"; // Déclare une variable 'utilisateur' et lui assigne la valeur "SuperDev"
var points = 0, vies = 3; // Tu peux même en déclarer plusieurs d'un coup !

Les règles de nommage pour tes variables js sont assez souples mais importantes :

1. Doit commencer par une lettre, un underscore (_) ou un dollar ($). Non, pas d’emoji en début de nom, désolé ! (Techniquement $ est souvent réservé ou utilisé par des librairies comme jQuery, donc on évite si on débute). Le terme javascript $variable fait référence à cette possibilité, mais ce n’est pas une syntaxe spéciale.
2. Peut contenir des lettres, des chiffres, des underscores, ou des dollars.
3. La casse compte ! maVariable est différente de mavariable. La convention est le camelCase : on commence par une minuscule, et chaque nouveau mot commence par une majuscule. Exemple : nomUtilisateurConnecte.
4. Évite les mots réservés de JavaScript (comme var lui-même, function, if, for, etc.).

Point crucial : Avec var, tu peux redéclarer la même variable dans la même portée sans que JavaScript ne bronche. var test = 10; var test = "Hello"; // Aucun problème pour var ! Mais attention aux bugs... Avec let ou const, ça déclencherait une erreur. C’est une des raisons pour lesquelles var est considéré moins sûr.

Le gros souci de var : Sa portée (scope) un peu trop large

C’est là que les choses deviennent « amusantes » (ou cauchemardesques, au choix). La portée d’une variable détermine où elle est accessible dans ton code. Il existe principalement deux types de portée en JavaScript « classique » (avant let/const) :

1. Portée Globale : Si tu déclares une javascript variable globale avec var en dehors de toute fonction, elle est accessible partout dans ton script. C’est pratique, mais dangereux : n’importe quelle partie de ton code peut la modifier, parfois sans que tu le veuilles.
   var nomGlobal = "Je suis partout !";
function maFonction() {
console.log(nomGlobal); // Affiche "Je suis partout !"
nomGlobal = "Modifié !"; // Oups, on change la variable globale
}
maFonction();
console.log(nomGlobal); // Affiche "Modifié !"
2. Portée de Fonction : Si tu déclares une variable avec var à l’intérieur d’une fonction, elle n’est accessible que dans cette fonction. C’est déjà mieux.
   function autreFonction() {
var nomLocal = "Juste ici.";
console.log(nomLocal); // Affiche "Juste ici."
}
autreFonction();
// console.log(nomLocal);
// Erreur ! nomLocal n'existe pas ici.

Le problème ? var ignore les blocs ! Un bloc, c’est ce qui est entre accolades {} (dans un if, for, while…). Si tu déclares une variable avec var dans un bloc (qui n’est pas une fonction), elle « fuit » dans la portée environnante (la fonction ou la portée globale).

if (true) {
var age = 30; // Déclaré dans un bloc if
}
console.log(age); // Affiche 30 ! La variable a "fuité" du bloc if.

Avec let et const, la variable resterait confinée au bloc {} (portée de bloc), ce qui est beaucoup plus logique et évite les effets de bord bizarres. C’est une différence critique.

Le Hoisting : Quand var met la charrue avant les bœufs

Accroche-toi, concept étrange en approche : le hoisting (hissage ou remontée en français). Avec var, JavaScript traite les déclarations de variables comme si elles étaient toutes remontées en haut de leur portée (globale ou de fonction) au moment de l’exécution.

Attention : Seule la déclaration est remontée, pas l’initialisation (l’affectation de valeur).

Regarde cet exemple :

console.log(monVar); // Affiche 'undefined', pas d'erreur !
var monVar = "Salut !";
console.log(monVar); // Affiche "Salut !"

Pourquoi la première ligne n’affiche pas une erreur ? À cause du hoisting, JavaScript interprète ce code comme ceci :

var monVar; // La déclaration est "remontée" en haut (avec la valeur 'undefined' par défaut)
console.log(monVar); // Affiche 'undefined'
monVar = "Salut !"; // L'initialisation reste à sa place
console.log(monVar); // Affiche "Salut !"

Ça peut rendre le code difficile à suivre et introduire des bugs subtils si tu utilises une variable avant de lui avoir assigné une valeur, en pensant qu’elle n’existe pas encore. Avec let et const, le hoisting existe aussi, mais il est différent : tu ne peux pas accéder à la variable avant sa déclaration dans le code (ça crée une « Temporal Dead Zone » ou TDZ), ce qui génère une erreur et t’aide à écrire du code plus propre.

var vs let vs const : Le match !

Pour que ce soit limpide, voici un tableau comparatif simple :

Caractéristique	var	let	const
Portée (Scope)	Globale ou Fonction	Globale, Fonction, ou Bloc	Globale, Fonction, ou Bloc
Hoisting	Déclaration remontée (initialisée à undefined)	Déclaration remontée (mais inaccessible avant – TDZ)	Déclaration remontée (mais inaccessible avant – TDZ)
Ré-déclaration	Permise dans la même portée	Interdite dans la même portée	Interdite dans la même portée
Ré-affectation	Permise	Permise	Interdite (pour les types primitifs)
Usage moderne	À éviter (sauf cas très spécifiques)	À privilégier pour variables changeantes	À privilégier pour variables constantes

Exporter vers Sheets

En gros : oublie var pour tes nouveaux projets. Utilise const par défaut. Si tu sais que la valeur de ta variable doit changer, utilise let. C’est la règle d’or du JavaScript moderne. Pourquoi ? Moins de bugs, code plus lisible, portée logique. Pour en savoir plus sur les bases, jette un œil à mon article sur les bases du javascript.

Comment afficher une variable javascript ? Plusieurs méthodes !

Ok, tu as déclaré ta variable js, maintenant tu veux voir ce qu’elle contient. C’est essentiel pour débugger ou simplement pour voir le résultat de ton code. Voici les méthodes courantes pour afficher une variable javascript :

1. console.log() : Le meilleur ami du développeur C’est la méthode la plus utilisée. Elle affiche la valeur de ta variable dans la console de développement de ton navigateur (appuie sur F12 pour l’ouvrir). C’est discret et puissant.
   var prenom = "Alex";
var annee = 2025;
console.log(prenom); // Affiche "Alex"
console.log("Année :", annee); // Affiche "Année : 2025" console.log("Infos:", prenom, annee); // Affiche "Infos: Alex 2025"
2. alert() : Pour les messages pop-up (à utiliser avec modération) alert() affiche une boîte de dialogue modale avec le contenu de ta variable. C’est très intrusif et bloque l’exécution du script tant que l’utilisateur n’a pas cliqué sur « OK ». Utile pour un test rapide, mais horrible pour l’expérience utilisateur en production.
   var messageImportant = "Sauvegarde terminée !";
alert(messageImportant);
3. Afficher dans la page HTML (Manipulation du DOM) Si tu veux que la valeur de ta variable apparaisse directement sur ta page web, tu dois interagir avec le DOM (Document Object Model). C’est un peu plus avancé mais fondamental en développement web front-end. // Supposons que tu as un élément HTML avec l'id="resultat"
var scoreFinal = 95;
var elementResultat = document.getElementById("resultat");
if (elementResultat) {
elementResultat.textContent = "Votre score final est : " + scoreFinal;
}
   (Pour en savoir plus sur le DOM)

Choisir la bonne méthode dépend de ce que tu veux faire : débugger (console.log), notifier l’utilisateur de manière bloquante (alert – rarement !), ou afficher dynamiquement des informations dans l’interface (DOM).

FAQ : Questions fréquentes sur var et les variables JS

On répond aux questions que tu te poses sûrement (ou que tu devrais te poser !) :

• Q : C’est quoi la différence principale entre var et let ?
  • R : La portée ! var a une portée de fonction ou globale, tandis que let a une portée de bloc (limitée aux {}). Ça veut dire que let est plus prévisible et crée moins de conflits, surtout dans les boucles for ou les conditions if.
• Q : Pourquoi le hoisting de var est considéré comme mauvais ?
  • R : Parce qu’il peut masquer des erreurs. Utiliser une variable avant sa déclaration « logique » dans le code sans avoir d’erreur (juste undefined) peut rendre le débogage très pénible. La « Temporal Dead Zone » de let et const génère une erreur claire, ce qui est préférable.
• Q : Peut-on encore utiliser var aujourd’hui ?
  • R : Techniquement, oui, les navigateurs le supportent toujours pour la compatibilité avec l’ancien code. Mais devrais-tu l’utiliser dans du nouveau code ? Non. Utilise let et const. Tu pourrais croiser var dans de vieux projets ou tutoriels, d’où l’importance de comprendre son fonctionnement (et ses pièges).
• Q : Comment éviter les variables globales en JavaScript ?
  • R : Utilise let et const à l’intérieur de fonctions ou de modules (si tu utilises des systèmes de modules comme ES6 Modules). Limite au maximum les variables déclarées en dehors de toute fonction. Si tu as besoin de partager des informations entre différentes parties de ton code, utilise des paramètres de fonction, des objets, ou des patterns de conception plus avancés. Éviter les javascript variable globale est une bonne pratique générale.
• Q : javascript variable avec ou javascript $variable, c’est quoi ?
  • R : javascript variable avec n’est pas une syntaxe standard. On déclare une variable avec var, let ou const. javascript $variable fait référence à la possibilité d’utiliser le signe dollar $ dans les noms de variables. C’est valide, mais souvent utilisé par convention pour des variables spéciales (par exemple, contenant des éléments DOM dans le contexte de jQuery) ou générées automatiquement. Pour un débutant, il vaut mieux s’en tenir aux lettres et au camelCase.
• Q : C’est quoi variable variable javascript ?
  • R : Ce terme peut prêter à confusion. Il ne s’agit pas d’une fonctionnalité directe comme en PHP ($$var). En JavaScript, ça pourrait faire référence à l’idée d’accéder à une propriété d’un objet en utilisant une chaîne de caractères contenue dans une autre variable (ex: monObjet[nomDeLaPropriete]), ou aux problèmes causés par la ré-déclaration facile avec var qui peut donner l’impression qu’une « variable change de nature ». Mais il n’y a pas de syntaxe variable variable directe en JS.

Alors, on dit adieu à var ?

Oui, globalement, dis adieu à var pour tes nouveaux développements. C’était le Far West du JavaScript, avec ses règles un peu floues et ses dangers cachés (portée étrange, hoisting piégeux, ré-déclaration facile). Comprendre var est essentiel pour lire du vieux code ou comprendre pourquoi let et const ont été introduits et sont maintenant la norme.

Adopte let et const : ton code sera plus propre, plus sûr, plus facile à débugger, et tu auras l’air beaucoup plus pro. C’est le chemin vers un JavaScript moderne et maîtrisé. Alors, prêt à ranger var au musée et à coder comme en 2025 ?