Fonctions fléchées et callbacks

Une fonction est une valeur comme une autre : on peut la stocker, la transmettre, et l'écrire en une ligne.

Objectifs de la séance

• écrire une fonction fléchée (a, b) => a + b ;
• comprendre qu'une fonction est une valeur que l'on peut passer en argument ;
• écrire et utiliser un callback ;
• lire sans peur du code comme onPress={() => ...} dans Expo ;
• découvrir que certains callbacks sont appelés plus tard (setTimeout).

---

Petite vérification

Avant de commencer, vérifiez si vous savez...

1. exécuter votre fichier fonctions.js et lire la ligne affichée pour Bob
2. dire ce que renvoie calculerPourcentage(5, 0) et pourquoi ce n'est pas Infinity
3. dire la différence entre une fonction qui contient console.log("A") et une fonction qui contient return "A"

📌 Réponse attendue

Vous devez être connecté pour voir le contenu.

Email : Mot de passe :

---

Notions théoriques

Les fonctions fléchées

Une fonction fléchée est une écriture courte d'une fonction, avec le symbole => (la « flèche »).

// Fonction classique
function additionner(a, b) {
  return a + b;
}

// Même fonction, en version fléchée
const additionner2 = (a, b) => {
  return a + b;
};

// Version fléchée la plus courte (une seule expression : return implicite)
const additionner3 = (a, b) => a + b;

console.log(additionner3(3, 4)); // 7

Écriture	Quand ?
(a, b) => { return a + b; }	le corps contient plusieurs instructions : les accolades et return sont nécessaires
(a, b) => a + b	le corps est une seule expression : le return est implicite
() => console.log("Salut")	aucun paramètre : parenthèses vides
(nombre) => nombre * 2	un paramètre : dans ce cours, on garde toujours les parenthèses

Quelle écriture choisir ?

Convention de ce cours (identique à celle d'Expo) :

• une fonction nommée, au premier niveau du fichier : function calculerPourcentage(...) { ... } ;
• une fonction courte, passée en argument : une fonction fléchée (...) => ....

Une fonction est une valeur

En JavaScript, une fonction peut être rangée dans une variable ou transmise à une autre fonction, exactement comme un nombre ou un texte.

const doubler = (nombre) => nombre * 2;

const copie = doubler; // on range la fonction dans une autre variable
console.log(copie(5)); // 10

Attention à la différence entre :

• doubler : la fonction elle-même (on la désigne) ;
• doubler(5) : le résultat de l'appel de la fonction avec 5.

Les callbacks : « appelle-moi quand tu auras fini »

Un callback (fonction de rappel) est une fonction que l'on passe en argument à une autre fonction, qui l'appellera au bon moment.

function repeter(nombre, action) {
  for (let i = 1; i <= nombre; i++) {
    action(i); // on appelle la fonction reçue
  }
}

repeter(3, (numero) => {
  console.log(`Question ${numero}`);
});

Question 1
Question 2
Question 3

repeter ne sait pas ce qu'est « l'action » : elle sait seulement qu'elle doit l'appeler. C'est ce qui rend ce modèle si puissant : le même code repeter peut servir à afficher, à calculer, à envoyer des messages...

Vous utilisez déjà des callbacks sans le savoir : la méthode forEach des listes appelle un callback pour chaque élément.

const themes = ["mots de passe", "hameçonnage", "réseaux"];

themes.forEach((theme) => {
  console.log(`Thème : ${theme}`);
});

Et dans une application Expo, un bouton reçoit un callback pour savoir quoi faire quand on appuie dessus :

<Button title="Valider" onPress={() => console.log("Réponse validée")} />

Un callback peut être appelé plus tard

Certaines fonctions n'appellent le callback qu'après un délai. C'est le cas de setTimeout : « exécute cette fonction dans N millisecondes ».

console.log("1. Je démarre");

setTimeout(() => {
  console.log("3. Une seconde plus tard");
}, 1000);

console.log("2. Je continue sans attendre");

1. Je démarre
2. Je continue sans attendre
3. Une seconde plus tard

Le programme n'attend pas : il continue, et le callback sera exécuté plus tard. Ce comportement est la base du code asynchrone que vous étudierez en détail dans la partie 5.

Bonne pratique - Donner un nom aux longs callbacks

Un petit callback peut rester en ligne : (theme) => console.log(theme). Si le callback devient long (plus de 3 ou 4 lignes), écrivez-le comme une fonction nommée au-dessus, puis passez son nom : themes.forEach(afficherTheme). Le code se lit alors comme une phrase.

---

Test de mémorisation/compréhension

Quelle fonction fléchée est équivalente à function carre(n) { return n * n; } ?

const carre = (n) => { n * n };

const carre = n => { return };

const carre = (n) => n * n;

const carre = => (n) n * n;

const carre = function => (n) { return n * n; };

Que fait l'appel repeter(2, (i) => console.log(i)); avec la fonction repeter vue dans la séance ?

Il affiche 1 puis 2

Il affiche 0 puis 1

Il affiche 2 une seule fois

Il n'affiche rien, car le callback n'est jamais appelé

Il affiche (i) => console.log(i) deux fois

Quelle est la différence entre doubler et doubler(5) ?

Il n'y en a aucune, les deux appellent la fonction

doubler(5) désigne la fonction, doubler est le résultat de son appel

doubler est une variable, doubler(5) est une constante

doubler est du texte, doubler(5) est un nombre dans tous les cas

doubler est la fonction, doubler(5) son résultat

Que verra-t-on dans la console en premier ? setTimeout(() => console.log("B"), 1000); console.log("A");

B, puis A une seconde plus tard

A, puis B une seconde plus tard

A et B en même temps

Rien, car setTimeout bloque le programme

Une erreur, car setTimeout attend un nombre seul

Qu'est-ce qu'un callback ?

Une variable déclarée avec const dans une boucle for

Une erreur renvoyée automatiquement par Node.js

Un type de donnée réservé aux nombres décimaux

Une fonction passée à une autre fonction

Une commande du terminal qui relance le programme

---

TP pour réfléchir et résoudre des problèmes

Votre mission : manipuler des fonctions fléchées et des callbacks pour animer l'affichage d'un quiz. Travaillez dans le fichier labo-js/callbacks.js.

Étape 1 — Une fonction fléchée

Écrivez la fonction fléchée estReussi qui prend un pourcentage et renvoie true s'il est supérieur ou égal à 50.

Bonne pratique - Nommer un booléen comme une question

Une fonction qui répond par vrai ou faux commence par est, a ou peut : estReussi, aGagne, peutRejouer. Dans un if, le code se lit comme une phrase : if (estReussi(score)).

Étape 2 — Écrire une fonction qui reçoit un callback

Complétez repeter(nombre, action), qui appelle action avec les numéros 1, 2, 3... jusqu'à nombre.

Bonne pratique - Le nom du paramètre dit son rôle

Nommer le paramètre action (plutôt que f ou fn) indique tout de suite que c'est une fonction à appeler. Un développeur junior comprend ainsi le code sans devoir chercher.

Étape 3 — Utiliser repeter avec un callback

Utilisez repeter pour afficher Question 1/3, Question 2/3, Question 3/3.

Bonne pratique - Terminer l'appel par );

Un callback en ligne se termine par }); : l'accolade ferme la fonction, la parenthèse ferme l'appel de repeter, le point-virgule termine l'instruction.

Étape 4 — Un callback appelé plus tard

Affichez Début du quiz, planifiez Temps écoulé ! dans 2 secondes, puis affichez Le quiz est lancé. Prévoyez l'ordre d'affichage avant de lancer le programme.

Bonne pratique - Prévoir le résultat avant d'exécuter

Avant de lancer un programme, écrivez sur papier ce que vous pensez qu'il va afficher. Si la prévision est différente du résultat, vous venez d'apprendre quelque chose.

📌 Une solution

Vous devez être connecté pour voir le contenu.

Email : Mot de passe :

---

Ce qu'il faut retenir

Notion	Résumé
Fonction fléchée	(a, b) => a + b : écriture courte d'une fonction, return implicite pour une seule expression.
Fonction = valeur	Une fonction peut être rangée dans une variable ou passée en argument.
Callback	Fonction transmise à une autre fonction, qui l'appellera au bon moment.
forEach	Appelle un callback pour chaque élément d'une liste.
setTimeout	Appelle un callback plus tard sans bloquer le programme : début de l'asynchrone.

Aperçu de la prochaine séance

Vous maîtrisez maintenant les fonctions. Dans la partie 3, vous allez construire les données du quiz : un objet pour une question, un tableau pour la liste, puis les méthodes map, filter et find qui transforment les listes sans boucle for.