Déclaration de variables (var, let, const)

À Jurassic Park, différentes espèces de dinosaures requièrent différents niveaux de sécurité - le gentil Brachiosaurus peut rester dans un espace ouvert, tandis que l'agressif Velociraptor a besoin d'une installation renforcée et fermée. De même, en JavaScript, nous avons trois façons différentes de déclarer des variables : var, let et const, chacune offrant un niveau différent de « sécurité » et de flexibilité.

Les bases de la déclaration de variables

Les variables en JavaScript sont comme des enclos étiquetés à Jurassic Park - elles permettent de stocker et d'organiser des données que nous pourrons référencer plus tard. Avant de pouvoir utiliser une variable, nous devons la déclarer.

1// Déclaration de la variable dinosaur avec le mot-clé var
2var dinosaur = "T-Rex";
3
4// Déclaration de la variable height avec le mot-clé let
5let height = 5.6;
6
7// Déclaration de la constante MAX_SPEED avec le mot-clé const
8const MAX_SPEED = 27;

Différences entre var, let et const

Portée des variables

1. var - Portée de fonction

Les variables déclarées avec var ont une portée de fonction, ce qui signifie qu'elles sont visibles dans toute la fonction où elles ont été déclarées.

1function monitorDinosaurs() {
2    var count = 5;
3
4    if (count > 3) {
5        var status = "Limite de sécurité dépassée !";
6        console.log(status);  // "Limite de sécurité dépassée !"
7    }
8
9    console.log(status);  // "Limite de sécurité dépassée !" - la variable est accessible en dehors du bloc if
10}
11
12// console.log(count);  // Erreur ! 'count' is not defined - var a une portée de fonction

C'est comme un système de sécurité où une alarme déclenchée dans une partie du parc (à l'intérieur du bloc if) reste audible dans tout le centre de contrôle (la fonction monitorDinosaurs), mais pas en dehors du parc.

2. let - Portée de bloc

Les variables déclarées avec let ont une portée de bloc - elles ne sont visibles qu'à l'intérieur du bloc dans lequel elles ont été déclarées.

1function securityCheck() {
2    let safetyStatus = "Normal";
3
4    if (emergencyDetected) {
5        let alarmLevel = "Red";
6        console.log(alarmLevel);  // "Red"
7    }
8
9    // console.log(alarmLevel);  // Erreur ! 'alarmLevel' is not defined - variable accessible uniquement dans le bloc if
10}

C'est comme une communication radio à portée limitée - l'information d'alarme (la variable alarmLevel) n'est disponible que dans la zone de danger (le bloc if), pas dans tout le centre de commande.

3. const - Valeur immuable

const, comme let, a une portée de bloc, mais introduit en plus une restriction : une fois assignée, la valeur ne peut plus être modifiée.

1function setupEnclosure() {
2    const ENCLOSURE_ID = "A-7";
3    const MAX_CAPACITY = 3;
4
5    // ENCLOSURE_ID = "B-3";  // Erreur ! Impossible de changer la valeur d'une constante
6
7    let currentDinosaurs = 2;
8    currentDinosaurs = 3;  // OK - les variables let peuvent changer de valeur
9}

C'est comme les identifiants d'enclos du parc - une fois assigné, le numéro d'enclos (p. ex. « A-7 ») ne peut plus être changé, pour éviter les erreurs et le danger.

Hoisting

En JavaScript, les déclarations de variables et de fonctions sont « hissées » au sommet de leur portée. C'est comme préparer tous les enclos du parc avant d'y amener les dinosaures.

1. var - Hoisting complet

Les variables déclarées avec var sont hissées avec leur déclaration, mais sans initialisation :

1console.log(dinosaurCount);  // undefined - la déclaration est hissée, mais pas l'initialisation
2var dinosaurCount = 10;

Cela équivaut à :

1var dinosaurCount;  // La déclaration est hissée au sommet
2console.log(dinosaurCount);  // undefined
3dinosaurCount = 10;  // L'initialisation reste à sa place d'origine

2. let et const - Hoisting partiel

Les variables déclarées avec let et const sont également hissées, mais ne sont pas initialisées - tenter d'y accéder avant la déclaration provoque une erreur :

1// console.log(dinoSpecies);  // Erreur : Cannot access 'dinoSpecies' before initialization
2let dinoSpecies = "Velociraptor";
3
4// console.log(MAX_WEIGHT);   // Erreur : Cannot access 'MAX_WEIGHT' before initialization
5const MAX_WEIGHT = 8000;

C'est comme la procédure de sécurisation - les enclos sont préparés (hoisting), mais personne ne peut y entrer (utiliser la variable) tant qu'ils ne sont pas officiellement ouverts (déclarés).

Redéclaration

1. var - Permet la redéclaration

1var securityLevel = "Low";
2var securityLevel = "High";  // Autorisé - écrase la déclaration précédente

C'est comme déplacer un dinosaure d'un enclos à un autre sans aucune restriction.

2. let et const - N'autorisent pas la redéclaration dans la même portée

1let carnivoreCount = 5;
2// let carnivoreCount = 7;  // Erreur ! 'carnivoreCount' has already been declared
3
4const MAX_VISITORS = 150;
5// const MAX_VISITORS = 200;  // Erreur ! 'MAX_VISITORS' has already been declared

C'est comme un contrôle strict de la relocalisation des dinosaures - tu ne peux pas assigner la même espèce à deux enclos différents simultanément.

Quand utiliser var, let et const

Quand utiliser const

const est l'option la plus sûre - utilise-la chaque fois que la valeur de la variable ne changera pas. C'est comme des clôtures métalliques pour les prédateurs :

1const PARK_NAME = "Jurassic Park";
2const ADMIN_PASSWORD = "clevergirl123";
3const DANGEROUS_SPECIES = ["T-Rex", "Velociraptor", "Dilophosaurus"];

Même pour les objets et les tableaux dont le contenu peut changer, mais dont la référence reste constante :

1const parkStatus = {
2    isOpen: true,
3    visitorCount: 372
4};
5
6// Autorisé - nous modifions une propriété de l'objet, pas la référence elle-même
7parkStatus.visitorCount = 373;
8
9// Erreur ! Impossible d'assigner un nouvel objet à une constante
10// parkStatus = { isOpen: false, visitorCount: 0 };

Quand utiliser let

let est un bon choix pour les variables dont la valeur changera, mais dont nous voulons limiter la portée au bloc courant. C'est comme des enclos flexibles pour les dinosaures plus dociles :

1function monitorParkSectors() {
2    for (let i = 0; i < sectors.length; i++) {
3        let currentSector = sectors[i];
4        let dangerLevel = assessDanger(currentSector);
5
6        if (dangerLevel > 7) {
7            let emergencyProtocol = selectProtocol(dangerLevel);
8            activateAlarm(currentSector, emergencyProtocol);
9        }
10    }
11    // Les variables i, currentSector, dangerLevel, emergencyProtocol ne sont plus accessibles ici
12}

Quand utiliser var

En raison de problèmes potentiels, var est actuellement rarement recommandé en JavaScript moderne. Cependant, il peut être utile dans des situations spécifiques où nous avons besoin d'une variable avec une portée de fonction.

1function legacyCode() {
2    if (condition) {
3        var oldSystemVariable = "value";
4    }
5
6    // Accès à la variable en dehors du bloc où elle a été déclarée
7    console.log(oldSystemVariable);
8}

C'est comme de vieux enclos moins sûrs dans le parc - ils fonctionnent, mais il vaut mieux les remplacer par des solutions plus modernes.

Bonnes pratiques

1. Utilise const en premier

Commence toujours par const pour tes variables. Si tu découvres plus tard que tu as besoin de changer la valeur, passe à let. C'est comme une règle à Jurassic Park - applique d'abord les mesures de sécurité les plus fortes, et ne considère des options moins restrictives que si tu as besoin de plus de flexibilité.

1// Commence avec const
2const dinoData = fetchDinosaurData();
3
4// Si tu as besoin de modifier la valeur, utilise let
5let dangerLevel = 0;
6for (const dino of dinoData) {
7    if (dino.aggressive) {
8        dangerLevel++;
9    }
10}

2. Évite var dans le nouveau code

En JavaScript moderne (ES6+), il est généralement préférable d'utiliser let et const au lieu de var.

3. Déclare les variables au début de leur portée

Cela aide à comprendre quelles variables sont utilisées dans un bloc de code donné :

1function processEnclosure(enclosureId) {
2    // Toutes les déclarations au début
3    const enclosure = getEnclosure(enclosureId);
4    let dinosaurCount = enclosure.inhabitants.length;
5    let feedingRequired = false;
6
7    // La logique de la fonction ci-dessous
8    if (timeElapsed > 4) {
9        feedingRequired = true;
10    }
11
12    //
13}

4. Utilise des noms de variables significatifs

Tout comme dans le parc, où chaque pièce ou procédure a une étiquette claire, dans le code les variables devraient avoir des noms significatifs :

1// MAUVAIS
2const x = 5;
3let y = getZ();
4
5// BON
6const maxDinosaursPerEnclosure = 5;
7let currentSafetyRating = calculateSafetyScore();

Déclarations de variables en TypeScript

TypeScript étend JavaScript avec un typage statique, qui apporte une couche de sécurité supplémentaire - comme des clôtures encore plus solides dans le parc :

1// Définir des types pour une meilleure sécurité
2let dinoName: string = "Velociraptor";
3const maxSpeed: number = 45;
4const isDangerous: boolean = true;
5
6// Définir des types complexes
7interface Dinosaur {
8    name: string;
9    species: string;
10    height: number;
11    weight: number;
12    dangerous: boolean;
13}
14
15const trex: Dinosaur = {
16    name: "Rexy",
17    species: "Tyrannosaurus Rex",
18    height: 5.6,
19    weight: 8000,
20    dangerous: true
21};

Les types en TypeScript fonctionnent comme des protocoles de sécurité supplémentaires - ils empêchent de placer un « herbivore dans un enclos de carnivore » (assigner une valeur du mauvais type).

Exemple pratique : système de surveillance de Jurassic Park

L'exemple suivant illustre l'utilisation correcte de var, let et const dans un scénario plus élaboré :

1// Valeurs de configuration constantes - ne pas changer
2const PARK_NAME = "Jurassic Park";
3const DANGER_LEVELS = {
4    LOW: 1,
5    MEDIUM: 2,
6    HIGH: 3,
7    CRITICAL: 4
8};
9const DANGEROUS_SPECIES = ["T-Rex", "Velociraptor", "Dilophosaurus"];
10
11// Fonction de surveillance du parc
12function monitorPark() {
13    // État du parc - peut changer
14    let isOpen = true;
15    let visitorCount = getCurrentVisitors();
16    let activeAlerts = [];
17
18    // Passer en revue chaque secteur
19    for (let i = 0; i < parkSectors.length; i++) {
20        const sector = parkSectors[i];  // La référence au secteur ne change pas dans la boucle
21        let sectorStatus = checkSectorStatus(sector);
22
23        // Vérifier les dinosaures dans le secteur
24        for (const dinosaur of sector.dinosaurs) {
25            // L'espèce est constante - ne change pas
26            const species = dinosaur.species;
27
28            // Le niveau de danger peut changer
29            let dangerLevel = DANGER_LEVELS.LOW;
30
31            // Évaluation de la menace
32            if (DANGEROUS_SPECIES.includes(species)) {
33                dangerLevel = DANGER_LEVELS.HIGH;
34
35                // Vérifier l'infrastructure de sécurité
36                const fenceStatus = checkFenceStatus(sector.id);
37                const powerStatus = checkPowerStatus(sector.id);
38
39                if (fenceStatus !== "Operational" || powerStatus < 90) {
40                    dangerLevel = DANGER_LEVELS.CRITICAL;
41
42                    // Protocole d'urgence local
43                    let emergencyProtocol = selectEmergencyProtocol(species);
44                    activeAlerts.push({
45                        sector: sector.id,
46                        species: species,
47                        protocol: emergencyProtocol
48                    });
49
50                    // Ajouter une alerte peut affecter le statut du parc
51                    if (dangerLevel === DANGER_LEVELS.CRITICAL) {
52                        isOpen = false;
53                    }
54                }
55            }
56        }
57    }
58
59    // Renvoyer le rapport de statut du parc
60    return {
61        parkName: PARK_NAME,
62        open: isOpen,
63        visitors: visitorCount,
64        alerts: activeAlerts
65    };
66}

Résumé

1. var :

   • A une portée de fonction
   • Est entièrement hissée
   • Permet la redéclaration
   • Comme de vieux enclos moins sûrs dans le parc

2. let :

   • A une portée de bloc
   • Est partiellement hissée (ne peut pas être utilisée avant la déclaration)
   • N'autorise pas la redéclaration dans la même portée
   • Comme des enclos standard avec la possibilité de modification

3. const :

   • A une portée de bloc
   • Est partiellement hissée (ne peut pas être utilisée avant la déclaration)
   • N'autorise ni la redéclaration ni la réassignation de valeur
   • Permet la modification du contenu des objets et des tableaux
   • Comme des enclos renforcés pour les dinosaures les plus dangereux

Le choix entre var, let et const est comme le choix des mesures de sécurité appropriées à Jurassic Park - cela dépend des besoins spécifiques, mais il vaut toujours la peine de commencer par les plus fortes (const) et de ne les assouplir qu'en cas d'absolue nécessité.

Dans la prochaine leçon, nous examinerons les types de données de base en JavaScript, qui sont comme différentes espèces de dinosaures dans notre parc - chacune avec ses propres caractéristiques et applications uniques.

1// Patrouille du parc - Boucles et itération
2// Exercice : Utiliser les boucles for, while, for...of
3
4// boucle for - itération classique
5console.log("=== Patrouille des enclos (boucle for) ===");
6const enclosures = ["T-Rex", "Raptor", "Triceratops", "Brachio", "Stego"];
7
8for (let i = 0; i < enclosures.length; i++) {
9  console.log("Enclos " + (i + 1) + ": " + enclosures[i] + " - OK");
10}
11
12// boucle for...of - itération sur les éléments
13console.log("\n=== Nourrissage (for...of) ===");
14for (const dino of enclosures) {
15  console.log("Nourrissage : " + dino);
16}
17
18// boucle while
19console.log("\n=== Analyse ADN (while) ===");
20let samples = 3;
21while (samples > 0) {
22  console.log("Analyse de l'échantillon " + samples + "...");
23  samples--;
24}
25
26// Ta mission :
27// 1. Utilise une boucle for pour parcourir la base de données ADN
28// 2. Utilise for...of pour lister les espèces
29// 3. Utilise while avec une condition d'arrêt
30
31// Ton code ici :
32