HOWTO · JavaScript

Fonction Lambda en JavaScript

Cet article vous aidera à comprendre la fonction lambda en JavaScript.

Sur cette page

En JavaScript, « fonction lambda » est une expression couramment recherchée pour désigner une fonction fléchée. Ce n’est pas une construction distincte du langage. Les fonctions fléchées offrent une syntaxe concise pour écrire des expressions de fonction, mais elles se comportent aussi différemment des fonctions classiques, notamment pour this, arguments et la construction d’instances.

Qu’est-ce qu’une fonction lambda en JavaScript ?

Une fonction fléchée est une expression de fonction qui s’écrit avec =>. Comme les autres fonctions, elle peut être stockée dans une variable, transmise à une autre fonction ou renvoyée par une fonction. Si son corps contient une seule expression, sa valeur est renvoyée implicitement. Un corps de bloc utilise des accolades et nécessite un return explicite pour renvoyer une valeur.

Syntaxe et exemples de fonctions fléchées

Utilisez des parenthèses autour de plusieurs paramètres ; pour un seul paramètre, vous pouvez les omettre. Par exemple, const add = (a, b) => a + b utilise un corps composé d’une expression, tandis que const add = (a, b) => { return a + b; } utilise un corps de bloc. Un bloc entre accolades sans return ne renvoie pas la valeur de l’expression.

Le programme JavaScript suivant calcule une somme et applique une fonction à une courte liste :

const add = (a, b) => a + b;
const numbers = [1, 2, 3];
const doubled = numbers.map(number => number * 2);

console.log(`Sum: ${add(2, 3)}`);
console.log(`Doubled: ${doubled.join(", ")}`);

Les résultats d’exécution fournis confirment cette sortie :

Sum: 5
Doubled: 2, 4, 6

Les libellés Sum et Doubled affichés dans le bloc de sortie restent en anglais, conformément à l’exemple conservé à l’identique.

Différences entre les fonctions fléchées et les fonctions classiques

Une fonction fléchée récupère this dans la portée lexicale qui l’entoure. Elle ne crée pas son propre this, ce qui peut être utile dans un rappel qui doit accéder à l’instance de la méthode environnante. Une fonction classique reçoit this selon la manière dont elle est appelée (ou via new lorsqu’elle sert à construire une instance).

Les fonctions fléchées ne possèdent pas non plus leur propre liaison arguments. Elles ne récupèrent pas automatiquement le arguments d’une fonction englobante ; la résolution lexicale ne peut en trouver un que si une portée parente en fournit un. Utilisez des paramètres de reste, par exemple (...items) => items.length, pour recueillir les arguments d’une fonction fléchée.

Une fonction fléchée ne peut pas être appelée avec new et ne possède pas de propriété prototype qui lui soit propre pour servir de constructeur. Une déclaration ou une expression de fonction classique peut servir de constructeur si elle est écrite pour ce rôle. La liaison d’une fonction fléchée à une variable peut recevoir un nom inféré, mais la fonction fléchée elle-même n’a pas de syntaxe de fonction nommée ; une expression de fonction nommée est une forme distincte.

Quand utiliser les fonctions fléchées

Les fonctions fléchées conviennent bien aux rappels courts pour lesquels on souhaite conserver le this lexical. Par exemple, items.map(item => item.price) transforme chaque élément en son prix et renvoie un nouveau tableau. Elles peuvent également convenir aux rappels d’événement lorsque celui-ci doit conserver le this de la portée environnante.

Choisissez une fonction classique si elle doit avoir son propre this, déterminé par la façon dont elle est appelée, si elle doit servir de constructeur ou si une déclaration de fonction est plus adaptée. Pour les écouteurs d’événements du navigateur, gardez à l’esprit que le this d’un rappel fléché ne désigne pas la cible de l’événement ; utilisez l’objet événement si vous avez besoin de cette cible, ou un rappel classique si son this lié à l’appel convient.

Bonnes pratiques et pièges courants

Veillez à ce que le corps d’une fonction fléchée reste assez court pour être compris d’un coup d’œil. Pour plusieurs étapes, utilisez un corps de bloc avec un return explicite, ou choisissez une déclaration de fonction nommée si elle permet de mieux identifier l’opération. Un nom de variable descriptif aide à comprendre la valeur fonction, mais ne transforme pas une fonction fléchée en expression de fonction nommée.

Ne choisissez pas la syntaxe fléchée uniquement parce qu’elle est plus courte. Son this lexical est utile dans certains rappels, mais ne convient pas lorsqu’une fonction doit avoir son propre this. Une fonction fléchée peut produire des effets de bord ; décider de les éviter dépend de la conception environnante, et non de la syntaxe elle-même.

FAQ

Que signifie « fonction lambda » en JavaScript ?

Cette expression désigne généralement une fonction fléchée. La syntaxe JavaScript correspondante est => ; « fonction lambda » est une expression de recherche, pas une construction distincte du langage.

Comment une fonction fléchée gère-t-elle this ?

Elle utilise le this de la portée lexicale qui l’entoure et n’en reçoit pas un nouveau en fonction de la manière dont elle est appelée.

Une fonction fléchée peut-elle servir de constructeur ?

Non. Une fonction fléchée ne peut pas être appelée avec new. Pour créer des instances, utilisez une fonction classique adaptée ou une classe.

Quels sont les avantages et les limites des fonctions fléchées ?

Leur syntaxe concise peut rendre les rappels faciles à parcourir, et leur this lexical peut éviter de devoir réassocier le contexte environnant. Elles ne conviennent pas lorsqu’une fonction doit avoir son propre this, sa propre liaison arguments ou un comportement de constructeur. Utilisez des paramètres de reste pour recueillir les arguments d’une fonction fléchée.