🔥 Callback Hell : Comment avons-nous échappé à cette échelle ? 😵‍💫

Bonjour, chers héros JS 💖
Le sujet d’aujourd’hui est Callback Hell — ce problème en JavaScript où le code se décale parfois vers la droite comme une pyramide et te fait pleurer.

Si tu as déjà vu un code comme celui-ci et que tu as pensé « Qu’est-ce qui se passe ?! », tu es au bon endroit 😏

doSomething(function(result) {
  doSomethingElse(result, function(newResult) {
    doAnotherThing(newResult, function(finalResult) {
      // et ainsi de suite...
    });
  });
});

Dans le monde JS, nous appelons cela la “Pyramide de la Doom”. Mais ne t’inquiète pas, il y a une issue 💪✨

🤔 Qu’est-ce qu’un Callback ?

Un callback est une fonction passée en argument à une autre fonction et appelée après l’exécution de la tâche principale.
Imagine que tu dis à quelqu’un : « Préviens-moi quand ton travail est terminé », et JS répond : « Bien sûr, je m’en occupe » 😏

Exemple 1 : Salutation simple

function greet(name, callback) {
  console.log(`Hello ${name}`);
  callback();
}

greet("Cansu", function() {
  console.log("Bienvenue dans le monde JS !");
});

Explication :

• La fonction greet prend deux paramètres : name et callback
• D’abord, elle affiche Hello Cansu
• Ensuite, elle appelle le callback → affiche "Bienvenue dans le monde JS !"

Conclusion : Callback = le mécanisme de JS pour “préviens-moi quand tu as fini” 😎

😵‍💫 Qu’est-ce que le Callback Hell ?

Mais quand les choses se compliquent… JS nous offre le cauchemar de l’échelle.

login(user, function(userData) {
  getProfile(userData, function(profile) {
    getFriends(profile, function(friends) {
      getPosts(friends, function(posts) {
        displayPosts(posts);
      });
    });
  });
});

Problèmes :

• Le code se décale vers la droite
• Fonction dans fonction → illisible
• Gestion des erreurs difficile
• Débogage = cauchemar 😵‍💫

Astuce : C’est ce que nous appelons Callback Hell / Pyramide de la Doom 💀

💡 Comment échapper au Callback Hell

1️⃣ Fonctions séparées (Approche modulaire)

function showPosts(posts) {
  displayPosts(posts);
}

function fetchPosts(friends) {
  getPosts(friends, showPosts);
}

function fetchFriends(profile) {
  getFriends(profile, fetchPosts);
}

login(user, function(userData) {
  getProfile(userData, fetchFriends);
});

Avantages :

• Le code se lit de haut en bas
• Moins de décalage → plus propre
• Débogage plus facile

Astuce : En faisant de chaque callback une fonction séparée, ton code devient lisible et réutilisable 😏

2️⃣ Découvre les Promises (Héros moderne JS ⚡)

Une Promise est JS qui te dit : “D’accord, je te préviendrai quand le travail sera terminé” 💌

login(user)
  .then(userData => getProfile(userData))
  .then(profile => getFriends(profile))
  .then(friends => getPosts(friends))
  .then(posts => displayPosts(posts))
  .catch(err => console.error(err));

Avantages :

• Le code se lit de haut en bas → plus naturel
• .catch() gère les erreurs en un seul endroit
• Callback Hell = disparu 😎

Astuce : Chaque .then() peut retourner une nouvelle opération, et JS attend → magie du chaining ✨

3️⃣ Async / Await – L’étape finale 🏁

Async/Await = la version magique des Promises, presque synchrone

async function showUserPosts(user) {
  try {
    const userData = await login(user);
    const profile = await getProfile(userData);
    const friends = await getFriends(profile);
    const posts = await getPosts(friends);
    displayPosts(posts);
  } catch (err) {
    console.error("Oups, une erreur est survenue :", err);
  }
}

Avantages :

• Le code se lit presque comme du JS synchrone normal
• try/catch permet une gestion propre des erreurs
• Callback Hell ? Disparu 💅

Humour :
Utiliser Async/Await = flirter avec JS 💖
Pendant que tu te demandes “Quand est-ce que ça finit ?”, tu prends réellement le contrôle 😏

🧠 Astuces pratiques & Trucs inhabituels

1. Faire de chaque callback une fonction séparée → lisibilité + réutilisabilité
2. Promise.all() → exécuter plusieurs tâches async indépendantes en même temps
3. Gestion des erreurs → .catch() ou try/catch pour un contrôle centralisé
4. Chaining .then() → éviter les callbacks compliqués
5. Async/Await → code presque synchrone

Exemple : Promise.all

const friends = getFriends(profile);
const posts = getPosts(friends);
const photos = getPhotos(friends);

Promise.all([friends, posts, photos])
  .then(results => {
    displayAll(results);
  })
  .catch(err => console.error(err));

Avantages :

• Exécute 3 opérations indépendantes simultanément
• Code propre et rapide
• Callback Hell ? Disparu ! 🚀

🎯 Résumé : Callback Hell = Drame évitable

• Écris des petites fonctions → la modularité est reine 👑
• Utilise les Promises → magie du chaining ✨
• Utilise Async/Await → JS propre, presque synchrone
• Gestion des erreurs → contrôle centralisé

JS peut essayer de te faire peur avec les callbacks, mais rappelle-toi :
Chaque échelle a une sortie 🌿