📘 Chapitre 5 – Fonctions imbriquées, portée, callbacks

1. 🎯 Objectif pédagogique

Comprendre la portée des variables, utiliser des fonctions imbriquées et mettre en œuvre des callbacks pour structurer le code et gérer des actions asynchrones.

2. 📚 Concepts abordés

  • Notion de portée (scope) : globale et locale
  • Fonctions imbriquées (fonctions définies à l’intérieur d’une autre)
  • Callbacks : fonctions passées en argument
  • Exécution synchrone vs asynchrone
  • Exemple d’usage avec setTimeout et fetch

3. 🧠 Explication théorique

Portée des variables

Une variable définie avec let ou const n’est accessible que dans le bloc où elle est définie.

function exemple() {
  let x = 10;
  console.log(x); // Accessible ici
}
console.log(x); // Erreur : x n'est pas défini

Fonctions imbriquées

On peut définir une fonction dans une autre pour isoler des comportements.

function saluer() {
  function message() {
    return "Bonjour !";
  }
  console.log(message());
}
saluer();

Callbacks

Un callback est une fonction passée en argument à une autre fonction pour être exécutée plus tard.

function calculer(a, b, callback) {
  let result = a + b;
  callback(result);
}

calculer(4, 6, function(res) {
  console.log("Résultat : " + res);
});

4. 🛠 Tutoriel pratique

Résumé

Nous allons créer une fonction qui additionne deux nombres, puis appelle un callback pour afficher le résultat avec un délai.

Arborescence du projet 

mon_projet/
├── index.html
└── script.js

Étape 1 : Fichier HTML 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Fonctions imbriquées et callbacks</title>
</head>
<body>
  <h1>Test des callbacks</h1>
  <script src="script.js"></script>
</body>
</html>

Étape 2 : Code JavaScript 

function addition(a, b, callback) {
  let somme = a + b;
  // On exécute le callback avec un délai de 1 seconde
  setTimeout(() => {
    callback(somme);
  }, 1000);
}

addition(5, 7, function(resultat) {
  console.log("La somme après 1 seconde est : " + resultat);
});

Étape 3 : Test

Ouvre la page et observe la console : le message doit s’afficher après une seconde.

5. 🧾 Résumé et points-clés

  • La portée détermine où une variable est accessible.
  • Les fonctions imbriquées aident à organiser le code.
  • Les callbacks permettent d’exécuter une fonction après une opération, utile pour gérer l’asynchrone.