Les fonctions flechees en javascript

Corps concis et corps en bloc

• Corps concis: une seule expression, sans accolades. Sa valeur est renvoyée automatiquement (retour implicite).
• Corps en bloc: des accolades { } contenant des instructions. Rien n'est renvoyé sans le mot-clé return.
• Deux erreurs sont très fréquentes :

// Erreur 1 : accolades sans return → la fonction renvoie undefined
const tripler = (n) => { n * 3; };
console.log(tripler(5));         // undefined

// Erreur 2 : objet renvoyé sans parenthèses
const creer = (nom) => { nom: nom };
console.log(creer('Sami'));      // undefined : { } est lu comme un bloc, "nom:" comme une étiquette

const creer2 = (nom, groupe) => { nom: nom, groupe: groupe };
// SyntaxError: Unexpected token ':'

// Corrections
const triplerOk = (n) => n * 3;                  // ou { return n * 3; }
const creerOk = (nom, groupe) => ({ nom, groupe });

1. this dans une fonction fléchée

   • Dans une fonction classique, this dépend de la façon dont la fonction est appelée. Quand on passe une fonction classique à forEach, à setTimeout ou à un autre code, elle perd le this de l'objet.
   • Une fonction fléchée n'a pas de this: elle utilise celui de l'endroit où elle est écrite. On dit que son this est lexical.

class Formateur {
  constructor(nom, groupes) {
    this.nom = nom;
    this.groupes = groupes;
  }

  afficherClassique() {
    this.groupes.forEach(function (g) {
      console.log(`${this.nom} enseigne en ${g}`);   // this vaut undefined ici
    });
  }

  afficherFlechee() {
    this.groupes.forEach((g) => console.log(`${this.nom} enseigne en ${g}`));
  }
}

const ali = new Formateur('Ali', ['DEV1', 'DEV2']);
ali.afficherFlechee();
// Ali enseigne en DEV1
// Ali enseigne en DEV2
ali.afficherClassique();
// TypeError: Cannot read properties of undefined (reading 'nom')

• Avant ES6, on contournait le problème en stockant this dans une variable (var self = this;) ou avec .bind(this). Les fonctions fléchées rendent ces astuces inutiles.
• Exemple : une minuterie dans une classe

class Chrono {
  secondes = 0;

  demarrer() {
    const id = setInterval(() => {
      this.secondes++;                          // this = l'objet Chrono
      console.log(`Chrono : ${this.secondes} s`);
      if (this.secondes === 3) clearInterval(id);
    }, 1000);
  }
}

new Chrono().demarrer();
// Chrono : 1 s
// Chrono : 2 s
// Chrono : 3 s

1. Une méthode passée en paramètre perd son this

   • Le problème existe aussi quand on passe une méthode à une autre fonction : elle est alors appelée seule, sans son objet.
   • Une solution consiste à déclarer la méthode comme une propriété contenant une fonction fléchée: son this reste attaché à l'objet.

class Compteur {
  valeur = 0;

  incrementer() {                         // méthode classique
    this.valeur++;
    return this.valeur;
  }

  incrementerFlechee = () => {            // propriété contenant une fonction fléchée
    this.valeur++;
    return this.valeur;
  };
}

const c = new Compteur();

const ref1 = c.incrementer;
ref1();          // TypeError: Cannot read properties of undefined (reading 'valeur')

const ref2 = c.incrementerFlechee;
console.log(ref2(), ref2());              // 1 2

setTimeout(c.incrementerFlechee, 0);      // fonctionne aussi

1. Ce que les fonctions fléchées n'ont pas

   • Pas de this propre: c'est leur force dans les callbacks, mais un défaut pour les méthodes d'un objet.

const groupe = {
  nom: 'DEV1',
  presenterFlechee: () => `Groupe ${this.nom}`,   // this n'est pas l'objet groupe
  presenter() {                                    // syntaxe de méthode : correct
    return `Groupe ${this.nom}`;
  },
};
console.log(groupe.presenterFlechee());   // Groupe undefined
console.log(groupe.presenter());          // Groupe DEV1

• Pas d'objet arguments: on utilise le paramètre rest ...valeurs, qui donne un vrai tableau.

function compterClassique() {
  return arguments.length;
}
const compterFlechee = (...valeurs) => valeurs.length;

console.log(compterClassique(1, 2, 3), compterFlechee(1, 2, 3));   // 3 3

• Pas de constructeur: une fonction fléchée ne peut pas être appelée avec new, et elle n'a pas de propriété prototype. Pour créer des objets, on utilise une classe.

const Personne = (nom) => {
  this.nom = nom;
};
new Personne('Ali');   // TypeError: Personne is not a constructor

• Dans le navigateur, un écouteur d'événement écrit avec une fonction classique reçoit l'élément cliqué dans this; une fonction fléchée, non. On utilise alors le paramètre de l'événement :

const bouton = document.querySelector('#valider');

bouton.addEventListener('click', function () {
  this.classList.add('active');           // this = le bouton
});

bouton.addEventListener('click', (event) => {
  event.currentTarget.classList.add('active');   // this n'est pas le bouton : on passe par l'événement
});

1. Les fonctions fléchées comme callbacks

   • Un callback (fonction de rappel) est une fonction passée en paramètre à une autre fonction, qui l'appellera au bon moment. C'est l'usage principal des fonctions fléchées.

const stagiaires = [
  { nom: 'Amira', groupe: 'DEV1', moyenne: 15.5 },
  { nom: 'Sami', groupe: 'DEV2', moyenne: 9.75 },
  { nom: 'Yasmine', groupe: 'DEV1', moyenne: 12 },
  { nom: 'Karim', groupe: 'DEV2', moyenne: 17.25 },
];

// Avant ES6
var nomsAdmis = stagiaires
  .filter(function (s) { return s.moyenne >= 10; })
  .map(function (s) { return s.nom; });

// Avec des fonctions fléchées
const admis = stagiaires
  .filter((s) => s.moyenne >= 10)
  .map((s) => s.nom);
console.log(admis);   // [ 'Amira', 'Yasmine', 'Karim' ]

const moyenneGenerale = stagiaires.reduce((total, s) => total + s.moyenne, 0) / stagiaires.length;
console.log(moyenneGenerale.toFixed(2));   // 13.63

setTimeout(() => console.log('Affiché après 2 secondes'), 2000);

1. Des fonctions qui renvoient des fonctions

   • Une fonction fléchée peut renvoyer une autre fonction fléchée. On obtient une fabrique de fonctions, paramétrée une fois puis réutilisée. Grâce à la fermeture, la fonction renvoyée se souvient du paramètre reçu.

const multiplierPar = (facteur) => (n) => n * facteur;

const triple = multiplierPar(3);
console.log(triple(5));             // 15
console.log(multiplierPar(10)(4));  // 40

// Utilisation pratique : une remise réutilisable avec map
const appliquerRemise = (taux) => (prix) => +(prix * (1 - taux)).toFixed(3);
console.log([100, 45.5, 20].map(appliquerRemise(0.1)));   // [ 90, 40.95, 18 ]

1. Les fonctions fléchées dans Angular

   • Dans un composant Angular, les méthodes s'écrivent avec la syntaxe classique (supprimer(id) { … }). Les fonctions fléchées servent pour tout ce qu'on passe en paramètre à l'intérieur de ces méthodes : elles conservent le this du composant.

export class ListeFormations {
  formations: Formation[] = [
    { id: 1, titre: 'Développement web', placesRestantes: 6 },
    { id: 2, titre: 'Réseaux informatiques', placesRestantes: 0 },
    { id: 3, titre: 'Infographie et design', placesRestantes: 10 },
  ];
  recherche = 'web';
  message = '';

  get formationsFiltrees(): Formation[] {
    return this.formations.filter((f) =>
      f.titre.toLowerCase().includes(this.recherche.toLowerCase()),
    );
  }

  get placesTotales(): number {
    return this.formations.reduce((total, f) => total + f.placesRestantes, 0);
  }

  supprimer(id: number): void {
    this.formations = this.formations.filter((f) => f.id !== id);
    this.message = 'Formation supprimée';
    setTimeout(() => (this.message = ''), 3000);   // efface le message après 3 s
  }
}

• Vous rencontrerez aussi des fonctions fléchées dans les API d'Angular : computed(() => …) et effect(() => …) avec les signals, ou subscribe((donnees) => …) avec le client HTTP. Ces notions seront étudiées dans les chapitres suivants.
• Dans un template : on n'écrit pas la logique dans le HTML. On appelle une méthode du composant, par exemple (click)="supprimer(f.id)", et c'est cette méthode qui utilise des fonctions fléchées.

Activité 1 : convertir en fonctions fléchées

• Dans le dossier rappel-ecmascript (dépôt GitHub), créer le fichier 14-conversion.js. Réécrire chaque fonction en fonction fléchée, sous la forme la plus courte possible, puis vérifier le résultat.

function carre(n) {
  return n * n;
}
function estMajeur(age) {
  return age >= 18;
}
function initiales(prenom, nom) {
  return prenom[0] + '.' + nom[0] + '.';
}
function creerProduit(nom, prix) {
  return { nom: nom, prix: prix, stock: 0 };
}
function moyenne(notes) {
  if (notes.length === 0) {
    return 0;
  }
  var somme = 0;
  for (var i = 0; i < notes.length; i++) {
    somme += notes[i];
  }
  return somme / notes.length;
}

console.log(carre(7), estMajeur(17), initiales('Amira', 'Ben Ali'));
console.log(creerProduit('Clavier', 45), moyenne([12, 15, 18]), moyenne([]));

// Résultat attendu :
// 49 false A.B.
// { nom: 'Clavier', prix: 45, stock: 0 } 15 0

• Pour initiales, utiliser un gabarit `${ }`; pour moyenne, remplacer la boucle par reduce. Quelle fonction ne peut pas s'écrire avec un corps concis ? Pourquoi ?

Activité 2 : trouver les trois bugs

• Copier ce programme dans 15-bugs.js et l'exécuter. Il contient trois erreurs liées aux fonctions fléchées.

const prixTTC = (ht) => { ht * 1.19; };
const creerFormation = (titre, duree) => { titre: titre, duree: duree };
const groupe = {
  nom: 'DEV1',
  effectif: 24,
  presenter: () => `Groupe ${this.nom} : ${this.effectif} stagiaires`,
};

console.log(prixTTC(100));
console.log(creerFormation('Web', 24));
console.log(groupe.presenter());

• Le programme s'arrête d'abord sur une SyntaxError: Unexpected token ':'. Quelle ligne est en cause ? La corriger.
• Relancer : le programme affiche undefined puis Groupe undefined : undefined stagiaires. Expliquer et corriger les deux autres bugs.
• Résultat attendu après correction :

119
{ titre: 'Web', duree: 24 }
Groupe DEV1 : 24 stagiaires

1. Activité 3 : traiter une liste de commandes

   • Dans 16-commandes.js, à partir du tableau ci-dessous, écrire chaque traitement en une seule instruction, avec des méthodes de tableaux et des fonctions fléchées. Commencer par une fonction fléchée montant(c) qui calcule prix × quantité.

const commandes = [
  { client: 'Amira', produit: 'Clavier', prix: 45, quantite: 2, payee: true },
  { client: 'Sami', produit: 'Écran', prix: 420, quantite: 1, payee: false },
  { client: 'Yasmine', produit: 'Souris', prix: 20, quantite: 3, payee: true },
  { client: 'Karim', produit: 'Casque', prix: 85, quantite: 1, payee: true },
  { client: 'Amira', produit: 'Câble HDMI', prix: 12.5, quantite: 4, payee: false },
];

• les commandes payées, sous la forme client : produit (filter + map) ;
• le chiffre d'affaires encaissé, c'est-à-dire le total des commandes payées (reduce) ;
• les impayés, sous la forme client doit montant DT;
• les trois produits les plus chers à la commande (toSorted + slice + map) ;
• existe-t-il une commande de plus de 400 DT (some) ? Toutes les quantités sont-elles positives (every) ?

[ 'Amira : Clavier', 'Yasmine : Souris', 'Karim : Casque' ]
Chiffre d'affaires encaissé : 235.000 DT
[ 'Sami doit 420.000 DT', 'Amira doit 50.000 DT' ]
[ 'Écran', 'Clavier', 'Casque' ]
true true

1. Activité 4 : un minuteur de séance

   • Dans 17-minuteur.js, écrire une classe Minuteur avec :
     • une propriété restant (en secondes) initialisée par le constructeur ;
     • une méthode demarrer() qui, toutes les secondes, diminue restant et l'affiche, puis affiche « Fin de la séance ! » et s'arrête quand il atteint 0 (setInterval et clearInterval avec une fonction fléchée).
   • Tester avec new Minuteur(3).demarrer();. Résultat attendu :

Il reste 2 s
Il reste 1 s
Il reste 0 s
Fin de la séance !

• Remplacer ensuite la fonction fléchée par function () { … } et relancer. Le programme affiche Il reste NaN s sans jamais s'arrêter : l'interrompre avec Ctrl + C. Expliquer en commentaire : que vaut this dans la fonction classique ? Pourquoi this.restant devient-il NaN? Pourquoi la condition d'arrêt n'est-elle jamais vraie ? Revenir ensuite à la fonction fléchée.
• À noter : ce bug est plus sournois que celui de forEach. Appelée par setInterval, la fonction classique ne reçoit pas undefined mais un autre objet (l'objet Timeout dans Node.js, window dans le navigateur) : il n'y a donc aucune erreur, seulement un résultat faux.

Activité 5 : fabriques de fonctions

• Dans 18-fabriques.js, écrire deux fonctions qui renvoient des fonctions :
  • creerFormateurPrix(devise, decimales = 3) renvoie une fonction qui formate un montant ;
  • auMoins(minimum) renvoie une fonction, utilisable dans filter, qui teste si la moyenne d'un stagiaire atteint le minimum.
• Tester avec le code suivant :

const enDinars = creerFormateurPrix('DT');
const enEuros = creerFormateurPrix('€', 2);
console.log(enDinars(45), enEuros(13.5));

const stagiaires = [
  { nom: 'Amira', moyenne: 15.5 }, { nom: 'Sami', moyenne: 9.75 },
  { nom: 'Yasmine', moyenne: 12 }, { nom: 'Karim', moyenne: 17.25 },
];
console.log(stagiaires.filter(auMoins(10)).map((s) => s.nom));
console.log(stagiaires.filter(auMoins(16)).map((s) => s.nom));

// Résultat attendu :
// 45.000 DT 13.50 €
// [ 'Amira', 'Yasmine', 'Karim' ]
// [ 'Karim' ]

• Faire un commit après chaque activité, puis un push : git commit -m "Fonctions fléchées : activité N".

Erreurs fréquentes