🔍 JavaScript Scope : « Je suis là — mais est-ce que tu peux me voir ? »

En JavaScript, le scope ressemble à une constitution secrète qui définit où vivent les variables, avec qui elles peuvent communiquer et quelles zones leur sont strictement interdites.

Dans cet article, nous expliquons le scope avec :

• beaucoup d’exemples
• beaucoup d’humour
• beaucoup d’astuces pratiques
• et ces moments du type : « Aaaah, donc c’est ça que je comprenais mal ! »

Attache ta ceinture, — le voyage est un peu long, mais très instructif 🚀

🧠 Qu’est-ce que le Scope ? (En langage humain)

Scope = La zone dans laquelle une variable est accessible

Autrement dit, JavaScript pose la question suivante :

« As-tu le droit d’utiliser cette variable ici ? » 👮‍♂️

Analogie avec la vraie vie :

• Scope global → Un centre commercial ouvert à tout le monde 🏬
• Scope de fonction → Ta maison 🏠
• Scope de bloc → Une pièce fermée à clé 🚪

🌍 1. Scope Global – « Je suis partout »

Les variables définies dans le scope global sont accessibles depuis n’importe où dans le fichier.

let siteName = "Code & Coffee";

function showSite() {
  console.log(siteName);
}

showSite(); // Code & Coffee

🔎 Que se passe-t-il ici ?

• siteName est défini en haut → scope global
• Appelé depuis une fonction → aucun problème

⚠️ Le danger du scope global

let user = "Cansu";
let user = "Ahmet"; // ❌ SyntaxError

💥 Même nom, même espace — chaos immédiat.

✅ Astuce :

• Garde le scope global aussi petit que possible
• Si ce n’est pas vraiment nécessaire → ne le rends pas global

🏠 2. Scope de Fonction – « Enlève tes chaussures avant d’entrer »

Les variables définies dans une fonction appartiennent uniquement à cette fonction.

function calculateAge() {
  let age = 25;
  console.log(age);
}

calculateAge(); // 25
console.log(age); // ❌ ReferenceError

🔍 Explication :

• age est un invité dans calculateAge
• S’il essaie de sortir → porte claquée 🚪

🧠 Info pratique :

Le scope de fonction aide à garder la mémoire propre.
Moins d’accès = moins de bugs 🐞

🧱 3. Scope de Bloc – « Zone privée »

Le scope de bloc est créé avec { }.
let et const sont très stricts à ce sujet.

if (true) {
  let drink = "coffee";
  const sugar = false;
  console.log(drink);
}

console.log(drink); // ❌

🎯 Pourquoi ?

• drink existe uniquement dans le bloc if
• Le monde extérieur ne le connaît pas

🧠 Astuce de la vraie vie :

Le scope de bloc est un sauveur dans les boucles :

for (let i = 0; i < 3; i++) {
  console.log(i);
}

console.log(i); // ❌

Sans let, i se répandrait partout 😬

🤡 La vérité sur var – « Ancien mais problématique »

if (true) {
  var mood = "happy";
}

console.log(mood); // happy

😐 Pourquoi ?

• var ne respecte pas le scope de bloc
• Il est soit dans le scope de fonction, soit il fuit vers le global

🚫 Conseil JavaScript moderne :

N’utilise pas var. Et si tu penses en avoir besoin… réfléchis encore.

🧬 Scope Lexical – « Tu appartiens à l’endroit où tu es écrit »

JavaScript détermine le scope selon l’endroit où le code est écrit, pas selon l’endroit où il est exécuté.

function outer() {
  let language = "JavaScript";

  function inner() {
    console.log(language);
  }

  inner();
}

outer(); // JavaScript

🔍 Explication :

• inner est écrit à l’intérieur de outer
• C’est pour ça qu’il peut voir language

JavaScript dit :

« Je regarde où tu es écrit, pas quand tu t’exécutes. » ✍️

🔒 Closure – « La fonction qui n’oublie jamais » 💘

La closure est le côté romantique du scope.

function wallet() {
  let money = 0;

  return function () {
    money += 10;
    console.log(money);
  };
}

const earn = wallet();

earn(); // 10
earn(); // 20
earn(); // 30

😲 Attends… comment ?

• wallet a fini de s’exécuter
• Mais money est toujours en vie

Parce que :

Une closure se souvient de son scope externe 🧠

🧠 Où l’utilise-t-on ?

• Compteurs
• Données privées
• Gestion d’état

🧠 Chaîne de Scope – « Logique de moteur de recherche »

Quand JavaScript cherche une variable :

1. Il regarde dans le scope actuel
2. S’il ne trouve pas → le scope parent
3. En dernier → le scope global

let food = "pizza";

function eat() {
  console.log(food);
}

eat(); // pizza

S’il ne trouve toujours pas :

console.log(drink); // ❌ ReferenceError

🚦 Erreurs les plus fréquentes

❌ Variables globales inutiles
❌ Attendre un scope de bloc avec var
❌ Réutiliser les mêmes noms de variables partout
❌ Mal comprendre les closures

✅ Règles d’or (À sauvegarder)

✨ Fais de const ton choix par défaut
✨ Utilise let quand une valeur doit changer
🚫 Mets var à la retraite
✨ Définis les variables dans le scope le plus petit possible
✨ Lisibilité > Ego

💬 Mot de la fin

Le scope est le héros caché de JavaScript.

Une fois que tu le comprends :

• Ton code devient plus propre
• Les bugs diminuent
• Tu te balades en mode : « Ouais… je connais JavaScript 😎 »