Chapitre 2 : Déclarer des variables

1. Qu'est-ce qu'une variable ?

Une variable est un conteneur qui permet de stocker une valeur (nombre, texte, etc.) pour l'utiliser plus tard dans votre code.

Pensez à une variable comme à une boîte étiquetée où vous pouvez ranger des informations.

2. Les trois façons de déclarer une variable

En JavaScript moderne, il existe trois mots-clés pour déclarer des variables :

let (recommandé)

let prenom = "Marie";
let age = 25;
console.log(prenom); // Affiche: Marie

const (pour les constantes)

const PI = 3.14159;
const pays = "France";
// PI = 3.14; // ❌ Erreur ! On ne peut pas modifier une constante

var (ancienne méthode, à éviter)

var nom = "Dupont"; // Fonctionne mais déconseillé

3. Règles de nommage des variables

• ✅ Commencer par une lettre, $ ou _
• ✅ Utiliser des lettres, chiffres, $ et _
• ✅ Respecter la casse (age ≠ Age)
• ❌ Pas d'espaces
• ❌ Pas de mots réservés (let, if, for, etc.)

Exemples valides

let prenom = "Alice";
let age2 = 30;
let _private = true;
let $price = 99.99;
let nomComplet = "Alice Dupont"; // camelCase (recommandé)

Exemples invalides

let 2age = 30;        // ❌ Ne peut pas commencer par un chiffre
let mon-nom = "Bob";  // ❌ Pas de tirets
let let = 5;          // ❌ Mot réservé

4. Différences entre let, const et var

Exemple avec let

let score = 10;
score = 20; // ✅ OK, on peut modifier
console.log(score); // 20

Exemple avec const

const MAX_USERS = 100;
// MAX_USERS = 200; // ❌ Erreur ! Impossible de modifier une constante

5. Portée des variables (Scope)

La portée détermine où une variable est accessible dans le code.

Portée de bloc (let et const)

if (true) {
    let message = "Bonjour";
    console.log(message); // ✅ Fonctionne
}
console.log(message); // ❌ Erreur ! message n'existe pas ici

Portée de fonction (var)

function test() {
    var x = 10;
    if (true) {
        var x = 20; // Même variable !
    }
    console.log(x); // 20 (modifié)
}

Portée globale

let nom = "Global"; // Variable globale

function afficher() {
    console.log(nom); // Accessible partout
}

afficher(); // "Global"

6. Le hoisting (remontée)

Le hoisting est un comportement JavaScript où les déclarations de variables sont "remontées" en haut de leur portée.

Avec var (hoisting complet)

console.log(x); // undefined (pas d'erreur)
var x = 5;
console.log(x); // 5

Avec let et const (hoisting sans initialisation)

console.log(y); // ❌ Erreur ! Cannot access before initialization
let y = 10;

7. Initialisation et affectation

Déclaration sans initialisation

let age; // Déclaré mais non initialisé
console.log(age); // undefined

age = 25; // Affectation
console.log(age); // 25

Déclaration avec initialisation

let prenom = "Alice"; // Déclaré et initialisé
const PI = 3.14; // const doit TOUJOURS être initialisé

Déclarations multiples

let x = 1, y = 2, z = 3;
const A = 10, B = 20;

8. Exercice pratique

Créez un script qui :

1. Déclare une variable prenom avec votre prénom
2. Déclare une constante anneeNaissance avec votre année de naissance
3. Calcule votre âge approximatif
4. Affiche le résultat dans la console

Solution :

// 1. Prénom
let prenom = "Marie";

// 2. Année de naissance
const anneeNaissance = 1998;

// 3. Calcul de l'âge
const anneeActuelle = 2025;
let age = anneeActuelle - anneeNaissance;

// 4. Affichage
console.log(prenom + " a environ " + age + " ans");
// Ou avec template literals (plus moderne) :
console.log(`${prenom} a environ ${age} ans`);