Déclarer des variables en JavaScript : Guide expert sur var, let et const

La manipulation des variables est l'une des premières compétences essentielles à acquérir en JavaScript, langage incontournable du développement web moderne. Maîtriser ces bases garantit une programmation robuste et efficace.

Déclarer une variable en JavaScript est simple grâce à sa syntaxe intuitive. Le vrai enjeu réside dans le choix des trois mots-clés : var, let et const. Chacun définit une portée et un comportement distinct, influençant la fiabilité de votre code.

Comprendre ces mécanismes vous permet de prendre des décisions éclairées pour vos applications. Explorons ces mots-clés, leur fonctionnement et leurs cas d'usage optimaux.

Trois manières de déclarer une variable JavaScript

Les trois mots-clés pour déclarer une variable en JavaScript sont :

• var
• let
• const

Exemple basique avec var :

var maVariable = 15;

Ces mots-clés let et const ont été introduits avec ECMAScript 6 (ES6). Avant de plonger dans les détails, familiarisons-nous avec des concepts clés.

Termes clés

Portée

La portée d'une variable désigne les parties du code où elle est accessible. Certaines ont une portée limitée (bloc ou fonction), d'autres une portée globale (accessible partout).

Maîtriser la portée évite les bugs lors de la croissance de vos projets, où les variables se multiplient.

Bloc

Les fonctions JavaScript utilisent des accolades {}. Le code qu'elles englobent forme un bloc, imbriquable à l'infini.

Les blocs sont cruciaux pour comprendre les variables. Exemple :

function blockTest() {
  // Ceci est un bloc
  {
    // Ceci est un bloc imbriqué
  }
}

Passons maintenant aux variables !

1. Variable JavaScript : var

Une variable déclarée avec var a une portée :

• De fonction si déclarée dans une fonction.
• Globale si déclarée hors fonction.

Exemple basique :

var test = 5; // Déclaration globale
function varTest() {
  console.log(test); // Affiche 5
}
varTest();

Ici, test est globale, accessible dans la fonction.

Modification locale dans la fonction :

var test = 5;
function varTest() {
  var test = 10;
  console.log(test); // Affiche 10 (portée locale)
}
varTest();
console.log(test); // Affiche 5 (globale intacte)

2. Variable JavaScript : let

let confère une portée de bloc, plus précise que var.

Comparaison avec var dans des blocs :

function varTest() {
  var test = 5;
  {
    var test = 10;
    console.log(test); // 10
  }
  console.log(test); // 10 (même variable modifiée)
}

Avec let :

function letTest() {
  let test = 5; // Bloc A
  {
    let test = 10; // Nouvelle variable, Bloc B
    console.log(test); // 10
  }
  console.log(test); // 5 (retour Bloc A)
}

3. Variable JavaScript : const

const offre une portée de bloc comme let, mais la valeur est immuable : impossible de la réaffecter ou redéclarer.

Réservez const aux constantes critiques.

const permanent = 10;

Tentatives de modification génèrent des erreurs :

const permanent = 20; // Erreur: déjà déclarée

permanent = 20; // Erreur: impossible de réaffecter

let permanent = 10; // Erreur: déjà déclarée

Devenir un expert JavaScript

Ce guide détaille les trois mots-clés pour déclarer des variables en JavaScript. Leur maîtrise est indispensable tout au long de votre carrière en développement web.

Approfondissez avec le DOM, les projets pratiques comme un diaporama JS, pour exceller en programmation moderne.