🪄 JavaScript Hoisting : Les Secrets Derrière le Code

(Où va ton code avant même de s’exécuter, qui emmène-t-il avec lui, et pourquoi te met-il parfois mal à l’aise ?)

Il y a certaines choses en JavaScript…
Tu penses les avoir écrites en bas,
mais JavaScript les a déjà déplacées en haut.

Le hoisting est l’un des mécanismes les plus dramatiques, les plus mal compris et les plus générateurs de bugs de JavaScript en coulisses.
Dans cet article, nous allons voir :

• Ce qu’est vraiment le hoisting
• Comment JavaScript lit et exécute le code
• Pourquoi var, let et const se comportent différemment
• Pourquoi les fonctions crient : « Je suis déjà là ! »
• Et pourquoi, dans la vraie vie, on se trompe si souvent

Le tout expliqué avec humour, exemples et conseils pratiques.

Si tu es prêt(e), levons le rideau 🎭

🧠 Que fait JavaScript avant d’exécuter ton code ?

JavaScript n’exécute pas ton code ligne par ligne immédiatement.
D’abord, il dit :

« Attends un peu… voyons qui est une variable, qui est une fonction, et qui va créer du drama. »

Ce processus se déroule en deux phases :

1️⃣ Phase de Création

• Les noms des variables sont stockés en mémoire
• Les déclarations de fonctions sont stockées en mémoire
• var → undefined
• let / const → TDZ (on y arrive)

2️⃣ Phase d’Exécution

• Le code s’exécute ligne par ligne
• Les valeurs sont assignées
• Les fonctions sont appelées

📌 Le hoisting se produit pendant la phase de création.

🎈 Qu’est-ce que le Hoisting ? (Simple et Clair)

Le hoisting, c’est lorsque JavaScript place les déclarations de variables et de fonctions en mémoire avant l’exécution du code.

⚠️ Mais voici le point crucial :

❗ Seules les déclarations sont hoistées, pas les affectations.

Mémorise cette phrase.
Accroche-la à ton mur.
Écris-la sur ta tasse de café.

🧪 Le Hoisting avec var : Ancien mais Dangereux

console.log(username);
var username = "Cansu";

Résultat :

undefined

« Ça ne devrait pas provoquer une erreur ? »

Voici comment JavaScript interprète réellement ce code :

var username; // hoisté
console.log(username);
username = "Cansu";

📌 var :

• Est hoisté
• Commence avec undefined
• Laisse passer les bugs en silence 😈

C’est pour ça que var est :

• Un cauchemar pour le débogage
• La malédiction des anciens projets
• Le rite de passage des développeurs juniors

🚪 let et const : Modernes, Polis, mais Stricts

console.log(age);
let age = 25;

Résultat :

ReferenceError: Cannot access 'age' before initialization

« Attends… ils ne sont pas hoistés ? »

Si.
Mais…

🕳️ La Temporal Dead Zone (TDZ)

Pour let et const, JavaScript dit en gros :

« Je sais que tu existes…
Mais tu n’as pas encore le droit de parler. »

La TDZ signifie :

• La variable est connue
• Mais inaccessible

{
  // La TDZ commence ici
  console.log(x); // ❌
  let x = 10;
}

📌 Ce comportement est volontaire :

• Il détecte les erreurs plus tôt
• Il impose une meilleure discipline de code

🧙 Hoisting des Fonctions : Le Vrai Spectacle Commence

🟢 Déclaration de Fonction (Le Héros Fiable)

sayHello();

function sayHello() {
  console.log("Hello  💛");
}

✔️ Fonctionne parfaitement.

Parce que :

• Toute la fonction est hoistée
• Son nom et son corps sont déjà en mémoire

🔴 Expression de Fonction : Le Personnage Masqué

sayHi();

var sayHi = function () {
  console.log("Hi!");
};

❌ Ne fonctionne pas.

Pourquoi ?

var sayHi; // undefined
sayHi();   // ❌ undefined is not a function

📌 Parce que :

• La variable est hoistée
• L’affectation de la fonction ne l’est pas

🏹 Fonctions Fléchées + Hoisting = Piège

hello();

const hello = () => {
  console.log("Hello JS!");
};

❌ ReferenceError

Les fonctions fléchées :

• Sont définies avec const / let
• Vivent dans la TDZ
• Ne peuvent pas parler avant leur tour

😵 Erreurs de Hoisting dans la Vie Réelle

❌ undefined Inattendu

if (!user) {
  var user = "guest";
}

console.log(user);

Résultat :

guest

Même si c’était à l’intérieur du if 😶

Raison :

• var n’est pas à portée de bloc

🧠 Règles Pratiques (Valent de l’Or)

✨ Définis les variables avant de les utiliser
✨ N’utilise pas var (oui, vraiment)
✨ Place les fonctions en haut de ton fichier
✨ Fais de const ton choix par défaut
✨ Connais le hoisting — mais ne lui fais pas confiance

🎓 Mini Quiz (Teste-toi)

console.log(a);
let a = 5;

A) undefined
B) 5
C) ReferenceError

👉 Bonne réponse : C

❤️ Mot de la Fin (Du Cœur)

Le hoisting est un secret que JavaScript te murmure :

« Ton code est prêt plus tôt que tu ne le penses. »

Mais quand tu en es conscient(e) :

• Le hoisting ne te fait plus peur
• Ton code devient plus propre
• Les bugs diminuent

Et JavaScript fait moins de crises 😌