Fonctions flèches en Javascript

Les fonctions flèches – également appelées fonctions « flèche grasse », sont une manière relativement nouvelle d’écrire des fonctions concises en JavaScript. Elles ont été introduites par les spécifications ECMAScript 6 et sont devenues depuis la fonctionnalité ES6 la plus populaire. Les fonctions fléchées nous permettent d’utiliser l’opérateur fat arrow => pour définir rapidement des fonctions JavaScript, avec ou sans paramètres. Nous pouvons omettre les accolades et les mots-clés function et return lorsque nous créons une nouvelle fonction JavaScript afin d’écrire une syntaxe de fonction plus courte. Ce ne sont pas seulement des gains de temps, mais ils produisent également des fonctions propres et plus lisibles.

Dans cet article, examinons quelques scénarios du monde réel pour créer des fonctions flèches – en utilisant ES6 par rapport à l’ancienne notation ECMAScript 5 afin que nous puissions voir comment les deux syntaxes se comparent l’une à l’autre.

La syntaxe de fonction flèche la plus simple est lorsque la fonction n’a pas de paramètres. Dans l’exemple ci-dessous, la syntaxe ECMAScript 5 déclare une expression de fonction et l’affecte à la variable birthday. Elle sort une simple chaîne de texte sur la console, disant « Joyeux anniversaire ! »:

Dans la syntaxe de fonction flèche, les accolades et les mots-clés function et return disparaissent. Maintenant, la fonction entière ne prend qu’une seule ligne. Les parenthèses vides indiquent que la fonction n’a pas de paramètres et la grosse flèche lie le corps de la fonction aux paramètres (actuellement inexistants) :

Un paramètre

Etendons l’exemple précédent avec un paramètre, spécifiquement le nom. L’ancienne syntaxe ES5 prend un paramètre et ajoute sa valeur à la chaîne à retourner:

La syntaxe de la fonction flèche fait essentiellement la même chose. Nous devons enfermer le nom du paramètre entre les parenthèses avant la flèche grasse et omettre le mot-clé de retour dans le bloc de fonctions :

Deux paramètres

Nous pouvons utiliser les fonctions flèches avec autant de paramètres que nous le souhaitons. Par exemple, voici le même exemple avec deux paramètres, l’âge et le nom. Maintenant, la fonction birthday() nécessite deux entrées pour retourner la chaîne de caractères. D’abord, utilisons ECMAScript 5:

Et, voici le même code avec la nouvelle notation ES6 :

Littéraux d’objet

Nous pouvons également utiliser la syntaxe de la fonction flèche pour déclarer des fonctions setter qui permettent aux utilisateurs de définir la valeur des littéraux d’objet. La fonction setBirthday() ci-dessous permet aux utilisateurs de définir le nom et l’âge de la personne ayant un anniversaire:

En faisant usage de la notation de fonction flèche, il ne faut qu’une ligne pour définir la même fonction setter :

Manipulation de tableaux

Nous pouvons également utiliser les fonctions flèches pour manipuler les tableaux JavaScript. Par exemple, jetons un coup d’œil au tableau persons qui comprend trois littéraux d’objet, chacun ayant une propriété de nom et d’âge :

La méthode map() intégrée de JavaScript nous permet d’appeler la même fonction sur chaque élément du tableau. En utilisant la notation ES5 traditionnelle, nous pouvons retourner la propriété nom de chaque personne de la manière suivante :

Avec la notation de fonction flèche, nous pouvons effectuer la même tâche en une ligne :

Quand ne pas utiliser les fonctions flèches

Bien que les fonctions flèches aient de nombreux cas d’utilisation, elles viennent aussi avec certaines limitations. Il y a certains scénarios où nous ne pouvons pas ou ne devrions pas utiliser la syntaxe des fonctions flèches.

Plus important encore, nous ne pouvons pas créer de constructeurs avec les fonctions flèches. Si nous utilisons le mot-clé new avec la syntaxe de la grosse flèche, la console lancera une erreur. Cela se produit parce que JavaScript traite les fonctions flèche de la même manière que les méthodes d’objet. Par conséquent, elles ne peuvent pas avoir leurs propres méthodes, ce qui serait une caractéristique essentielle des objets JavaScript. En outre, nous ne pouvons pas utiliser la syntaxe ES6 pour déclarer des littéraux d’objet et des fonctions de rappel contenant des méthodes qui font usage du mot-clé this, car les fonctions flèche traitent cela d’une manière différente.

Conclusion

Les fonctions flèche fournissent aux développeurs un raccourci utile pour écrire des expressions de fonction en JavaScript. La syntaxe flèche grasse a de nombreux cas d’utilisation, de sorte qu’elle est rapidement devenue la fonctionnalité ES6 préférée de la communauté JavaScript. Si elle est utilisée de manière cohérente, la nouvelle notation compacte peut faire gagner beaucoup de temps et de bande passante, et améliorer la lisibilité du code.

Merci de votre lecture.