Fonctions fléchées

Les fonctions fléchées offrent une syntaxe plus courte pour écrire des expressions de fonction. Elles ont été introduites avec ES6 et sont maintenant l'une des fonctionnalités les plus utilisées en JavaScript moderne.

Syntaxe de base — paramètres entre parenthèses, flèche, puis un corps de bloc :

const greet = (name) => {
  return 'Hello, ' + name + '!';
};

Corps concis — si le corps de la fonction est une seule expression, tu peux omettre les accolades et le mot-clé return. L'expression est retournée implicitement :

const double = (x) => x * 2;

Paramètre unique — les parenthèses sont optionnelles quand il y a exactement un paramètre :

const double = x => x * 2;

Aucun paramètre — utilise des parenthèses vides :

const sayHello = () => 'Hello!';

Plusieurs paramètres — les parenthèses sont obligatoires :

const add = (a, b) => a + b;

Les fonctions fléchées sont particulièrement élégantes pour les callbacks courts :

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

Comprendre quand une valeur est retournée est crucial avec les fonctions fléchées.

Corps concis (retour implicite) : Quand tu omets les accolades, l'expression unique est automatiquement retournée :

const square = x => x * x;
console.log(square(5)); // 25

Corps de bloc (retour explicite) : Quand tu utilises des accolades, tu dois utiliser le mot-clé return explicitement :

const square = x => {
  return x * x;
};

Une erreur courante est d'utiliser des accolades sans return :

const square = x => { x * x }; // Retourne undefined !

Retourner un objet littéral : Puisque les accolades sont utilisées pour le corps de la fonction, retourner un objet littéral nécessite de l'envelopper entre parenthèses :

// Incorrect — JS pense que {} est le corps de la fonction
const getUser = () => { name: 'Alice' }; // Retourne undefined

// Correct — les parenthèses indiquent à JS que c'est une expression
const getUser = () => ({ name: 'Alice' });
console.log(getUser()); // { name: 'Alice' }

Pour les expressions multilignes, tu peux envelopper l'expression entière entre parenthèses :

const getFullName = (first, last) => (
  first + ' ' + last
);

La différence comportementale la plus importante entre les fonctions fléchées et les fonctions régulières est la façon dont elles gèrent le mot-clé this.

Les fonctions fléchées n'ont pas leur propre this. Elles héritent de this depuis la portée lexicale englobante (le code qui les entoure).

Cela rend les fonctions fléchées idéales pour les callbacks :

const timer = {
  seconds: 0,
  start() {
    // La fonction fléchée hérite de 'this' depuis start()
    setInterval(() => {
      this.seconds++; // 'this' fait correctement référence à timer
      console.log(this.seconds);
    }, 1000);
  }
};

Avec une fonction régulière, this ferait référence à l'objet global (ou undefined en mode strict), pas à l'objet timer.

N'utilise PAS les fonctions fléchées comme méthodes d'objet :

const person = {
  name: 'Alice',
  // Mauvais — fonction fléchée : 'this' n'est PAS l'objet person
  greet: () => console.log('Hi, ' + this.name), // undefined

  // Bon — syntaxe de méthode régulière raccourcie
  greet() { console.log('Hi, ' + this.name); }  // 'Hi, Alice'
};

Autres limitations :

• Les fonctions fléchées ne peuvent pas être utilisées comme constructeurs (pas de mot-clé new).
• Les fonctions fléchées n'ont pas d'objet arguments. Utilise les paramètres rest (...args) à la place.