Les fonctions fléchées (Arrow) en javascript

Avec ES6 JavaScript est venu avec de nombreuses mises à jour du langage, y compris l’opérateur spread, la déstructuration des objets, un nouveau type de variables, et plus encore. En plus de toutes ces fonctions étonnantes, il y a des fonctions fléchées (Arrow), une nouvelle façon concise d’écrire des fonctions. Dans cet article, nous passerons en revue les bases des fonctions fléchées et discuterons de leurs avantages.

Avec les fonctions fléchées, vous pouvez définir une fonction lisible et concise en une seule ligne !

Les fonctions en ES5

Commençons par examiner comment nous avons défini les fonctions avec ES5 JavaScript. Pour définir une fonction, il fallait le mot-clé fonction. Par exemple, si nous voulions définir une fonction qui multiplierait un nombre par deux, elle ressemblerait à ceci :

function multiplyByTwo(num){     return num * 2; }

Nous pourrions également définir la fonction et l’assigner à une variable si nous le voulions.

const multiplyByTwo = function(num){     return num * 2; }

Quelle que soit la façon dont vous le faites, la fonction mot-clé doit être incluse.

Votre première fonction fléchée ES6

Pour créer une fonction fléchée, vous n’avez pas besoin du mot-clé function. En fait, vous supprimez ce mot-clé et ajoutez une flèche juste après les paramètres mais avant le crochet ouvrant. Ça ressemblerait à ça :

const multiplyByTwo = (num) => {     return num * 2; }

Pour l’instant, cela ne semble pas très différent de l’ancienne façon de le faire, mais nous pouvons y apporter quelques améliorations.

Suppression de parenthèses inutiles pour la fonction fléchée en javascript

Les parenthèses autour des paramètres sont nécessaires s’il n’y a pas de paramètres ou s’il y a plus d’un paramètre. Cependant, lorsque votre fonction flèche n’a qu’un seul paramètre, vous pouvez omettre la parenthèse pour la simplifier, un peu comme ça :

const multiplyByTwo = num => {     return num * 2; }

Retour implicite pour la fonction flèche ES6

Souvent, nous écrivons des fonctions qui retourne après une seule ligne de code. Avec l’ancienne façon d’écrire les fonctions, le nombre de lignes dans la fonction n’avait pas d’incidence sur la façon dont vous aviez défini la fonction. Avec les fonctions flèches, c’est possible.

Si la seule chose que vous voulez faire dans une fonction est un retour en une ligne, vous pouvez utiliser le retour implicite pour simplifier grandement votre fonction. Lorsque vous utilisez le retour implicite, vous n’avez pas besoin de l’accolade ou du mot-clé return. Ça ressemblerait à ça :

const multiplyByTwo = num => num * 2;

Une chose à y penser est que vous pouvez toujours utiliser la syntaxe de retour implicite même si vous n’avez pas nécessairement besoin de retourner quoi que ce soit. En d’autres termes, si les appelants de votre fonction ne s’attendent pas à ce qu’elle renvoie quoi que ce soit, il n’est pas important qu’elle renvoie quelque chose.

Par exemple, si je voulais juste imprimer quelque chose sur la console, je pourrais utiliser le retour implicite pour raccourcir la longueur de la fonction.

const printName = (first, last) => console.log(`${first} ${last}`);

Utilisation des fonctions fléchées avec Map et Filter

L’un des endroits les plus courants où vous verrez les fonctions fléchées utilisées c’est avec les méthodes de tableau JavaScript comme map, reduce, filter..etc En utilisant les fonctions fléchées avec ces méthodes, vous pouvez effectuer des transformations complètes de tableaux en une seule ligne.

Pour plus d’informations sur les méthodes de tableau (array) javascript, je vous ferai un petit article tuto sur Comment construire les méthodes de tableau javascript from scratch

Examinons deux exemples, l’un avec Map et l’autre avec Filter. Pour la version Map, disons que nous voulons convertir un tableau en multipliant chaque nombre par deux. Ça ressemblerait à quelque chose comme ça :

const twodArray = [1,2,3,4].map( num => num * 2);

Notez qu’avec cette fonction flèche, j’ai omis les parenthèses (parce qu’il n’y a qu’un seul paramètre) et j’ai utilisé le retour implicite. Cela a maintenu toute la transformation en une seule ligne !

Maintenant, faisons un autre avec Filter. Disons que nous voulons filtrer tous les nombres qui ne sont pas pairs.

const filteredArray = [1,2,3,4].filter( num => num % 2 == 0);

Encore une fois, pas de parenthèse et un retour implicite. Super rapide pour faire des transformations de tableaux en en utilisant qu’un seul !

Utiliser this avec les fonctions fléchées ES6

La conversation autour du mot-clé this est certainement du JavaScript intermédiaire, donc vous pourriez avoir besoin de faire un peu de recherche supplémentaire pour cette section. Quoi qu’il en soit, commençons par un exemple utilisant une définition de fonction ES5 à l’intérieur d’un objet person.

const person = {     first: "James",     last: "Quick",     getName: function() {         this.first + " " + this.last     } }

Dans ce cas, nous avons créé un objet person avec un prénom et un nom de famille ainsi qu’une fonction getName() qui retourne le nom complet de la personne. A l’intérieur de la fonction, nous essayons de référencer la première et la dernière propriété, en appelant this.first et this.last.

Lorsque les fonctions ES5 sont définies dans un objet, this fait référence à l’objet lui-même.

La raison pour laquelle nous pouvons accéder à ces propriétés à travers ce mot-clé, est que lorsque ces fonctions sont définies à l’intérieur d’un objet, elles sont automatiquement liées à l’objet lui-même. Par conséquent, avec les fonctions ES5, nous pouvons toujours référencer les propriétés de l’objet en utilisant this.

Les fonctions fléchées ne lient rien au mot-clé this.

Cependant, lorsque vous utilisez les fonctions fléchées, les choses changent un peu. Les fonctions de flèche ne font pas de liaison pour le mot-clé this. Par conséquent, si nous devions changer la définition de la fonction pour en faire une fonction flèche, les choses ne fonctionneraient pas.

const person = {     first: "James",     last: "Quick",     getName: () => {         this.first + " " + this.last     } }

Dans ce cas, l’indéfini sera retourné pour la première et la dernière propriété. La raison en est que le mot-clé this n’est pas lié à l’objet person, il n’a pas de première et dernière variable à laquelle se référer.

Comprendre la différence d’utilisation de this dans les fonctions fléchées est vraiment important !

Conclusion

Les fonctions flèches sont l’une des nombreuses petites fonctionnalités de l’ES6 JavaScript. Vous les verrez de plus en plus utilisés dans les exemples et la documentation, il est donc intéressant d’apprendre comment elles fonctionnent. Sans compter qu’elles peuvent améliorer considérablement la concision et la lisibilité de votre code !

En parlant de concision et lisibilité, avez vous lu mon article sur le tri des tableaux en ES6 ?

Comme toujours vous pouvez me faire part de vos réflexions, questionnements en me laissant un petit commentaire (ça fait toujours plaisir)