Expressions de fonction et fonctions fléchées

Chapitre 10 — Les fonctions en JavaScript · Expressions de fonction et fonctions fléchées

1. Trois écritures

Figure 1 — Trois écritures, trois comportements légèrement différents.

// 1. Trois façons d'écrire la même fonction
function carre1(x) { return x * x; }          // déclaration
const carre2 = function (x) { return x * x; }; // expression
const carre3 = (x) => x * x;                   // fonction fléchée
console.log(carre1(6), carre2(6), carre3(6));

// 2. Les variantes d'écriture d'une fonction fléchée
const direBonjour = () => "Bonjour";                     // aucun paramètre
const doubler = n => n * 2;                              // un paramètre : parenthèses facultatives
const somme = (a, b) => a + b;                           // plusieurs paramètres
const fiche = (nom, note) => ({ nom, note });            // renvoyer un objet : parenthèses autour
const mention = (note) => {                              // plusieurs instructions : accolades + return
  if (note >= 14) return "Bien";
  return note >= 10 ? "Passable" : "Insuffisant";
};
console.log(direBonjour(), doubler(8), somme(2, 3), fiche("Amina", 15), mention(12));

// 3. Remontée (hoisting) : seule la déclaration peut être appelée avant d'être écrite
console.log("déclaration avant sa définition :", tripler(3));
function tripler(x) { return x * 3; }
try { quadrupler(3); } catch (e) { console.log("expression avant sa définition →", e.name); }
const quadrupler = (x) => x * 4;

// 4. Les fléchées sont parfaites comme callbacks
const notes = [12, 7, 16, 10];
console.log("admis :", notes.filter((n) => n >= 10), "| sur 100 :", notes.map((n) => n * 5));

// 5. Différence avec this : une fléchée n'a pas son propre this
const stagiaire = {
  nom: "Karim",
  notes: [14, 16],
  presenterClassique: function () { return `Je suis ${this.nom}`; },
  presenterFlechee: () => `Je suis ${typeof this === "object" && this !== null && this.nom ? this.nom : "?? (pas de this propre)"}`,
  afficherNotes: function () {
    return this.notes.map((n) => `${this.nom} : ${n}`);   // la fléchée garde le this de afficherNotes
  },
};
console.log(stagiaire.presenterClassique(), "|", stagiaire.presenterFlechee());
console.log(stagiaire.afficherNotes());

Résultat dans la console

36 36 36
Bonjour 16 5 { nom: 'Amina', note: 15 } Passable
déclaration avant sa définition : 9
expression avant sa définition → ReferenceError
admis : [ 12, 16, 10 ] | sur 100 : [ 60, 35, 80, 50 ]
Je suis Karim | Je suis ?? (pas de this propre)
[ 'Karim : 14', 'Karim : 16' ]

2. Les fonctions fléchées en détail

• On remplace function par une flèche => (le signe égal suivi du signe « supérieur à ») placée après les paramètres.
• Un seul paramètre : les parenthèses sont facultatives (n => n * 2) ; aucun ou plusieurs : obligatoires.
• Une seule expression : pas d'accolades ni de return, le résultat est renvoyé automatiquement (retour implicite).
• Pour renvoyer un objet directement, on l'entoure de parenthèses : () => ({ nom, note }), sinon les accolades seraient prises pour un bloc.
• Avec des accolades, il faut écrire return explicitement.

3. Quand ne pas utiliser une fonction fléchée

Une fonction fléchée n'a pas son propre this: elle utilise celui de l'endroit où elle est écrite. C'est un avantage dans un callback (la fléchée de afficherNotes retrouve this.nom), mais un piège pour une méthode d'objet (presenterFlechee ne connaît pas this.nom). Elle n'a pas non plus d'objet arguments et ne peut pas servir de constructeur avec new. Le mot-clé this est détaillé au chapitre 16.

← Les paramètres par défaut et les paramètres restLes fonctions prédéfinies en JavaScript →