Variables - Mémo JavaScript

Variables & Portée

let, const, var, TDZ & Conventions

Les variables sont des conteneurs nommés. Depuis ES6 (2015), JavaScript offre trois façons de les déclarer, chacune avec ses règles de portée (Scope) et de mutabilité.

Comparatif


// 1. const (La norme)
// - Ne peut PAS être réassignée
// - Portée de BLOC { }
const PI = 3.14; 
// PI = 3.15; // ❌ TypeError

// 2. let (La variable locale)
// - PEUT être réassignée
// - Portée de BLOC { }
let score = 0;
score = 10; // ✅ OK

// 3. var (L'ancêtre - À BANNIR)
// - Portée de FONCTION
// - "Fuite" hors des if/for
// - Subit le Hoisting (initialisé à undefined)
var leak = "Je suis partout";

🔭 Visualisation des Portées (Scopes)

La portée définit où une variable est visible.

                        // 🌍 Global Scope

                        const global = "Visible partout";

                        function app() {

                          // 📦 Function Scope

                          const local = "Visible dans
                        app()";

                          if (true) {

                            // 🧱 Block Scope

                            let block = "Caché ici";

                            var leak = "Je m'échappe
                        !";

                          }

                          // ici: global ✅, local ✅, leak ✅, block
                            ❌

                        }

🏷️ Conventions de Nommage

camelCase

userName, isLoggedIn

Standard pour variables & fonctions.

PascalCase

UserComponent, ApiService

Pour les Classes et Composants React.

SCREAMING_SNAKE

MAX_WIDTH, API_KEY

Pour les constantes hardcodées.

👻 Hoisting & Temporal Dead Zone (TDZ)

Hoisting : JS "remonte" les déclarations en haut du scope avant l'exécution.

var est initialisé à undefined (on peut y accéder avant, ça vaut undefined).
let/const sont remontés mais placés en TDZ. Y accéder avant crashe le script (ReferenceError).

console.log(a); // undefined (pas de crash, mais bug potentiel)
var a = 5;

console.log(b); // ❌ ReferenceError! (Merci la TDZ)
let b = 10;

🔬 Visualiseur de Scope Interactif

Cliquez pour simuler l'exécution et voir où vivent les variables.

En attente d'exécution...

💡 Bonnes Pratiques :

Toujours utiliser const par défaut.
Passer à let uniquement si réassignation nécessaire.
Nommer les booléens avec is, has, can (ex: isVisible).
Ne jamais utiliser var. Jamais.

← Dashboard Suivant: Types →