Le guide des fonctions fléchées dans ES6

En savoir plus sur l'une des fonctionnalités les plus puissantes d'ES6: les fonctions fléchées. Nous apprendrons comment nous pouvons avoir des fonctions meilleures, plus concises et plus puissantes en JavaScript.

Dans cet article, nous allons en savoir plus sur l'une des meilleures façons de déclarer et de créer des fonctions en JavaScript. Introduit dans la version ES6 de JavaScript et appelé fonctions fléchées, c'est un moyen de créer de meilleures fonctions avec une syntaxe plus propre, ce qui rend notre code plus lisible. Nous allons en apprendre davantage sur les fonctions fléchées, comment et quand les utiliser au lieu de la méthode de déclaration de fonction standard – mais d'abord, apprenons-en plus sur les fonctions et leur fonctionnement en JavaScript.

L'une des parties les plus spéciales et importantes de la programmation, en général, est une fonction, la façon dont nous pouvons utiliser un simple morceau de code pour exécuter une tâche particulière. Cela est particulièrement vrai en JavaScript. Presque tout ce qui se passe en JavaScript se produit à l'intérieur d'une fonction.

Les lignes de code les plus importantes de votre application peuvent se trouver actuellement à l'intérieur d'une fonction. Toute la logique de l'utilisateur, la logique d'authentification et à peu près tout ce qui est important se fait par les fonctions. Une fonction est un bloc de code qui peut exécuter une tâche, et nous pouvons lui passer des paramètres, et elle n'est exécutée que lorsqu'elle est appelée.

Dans JavaScript en particulier, les fonctions sont des objets et elles doivent toujours renvoyer une valeur, sinon elles nous seront renvoyées non définies. Apprenons un peu plus sur les fonctions en JavaScript, puis nous allons comprendre pourquoi les fonctions fléchées sont un moyen si puissant et si beau de créer des fonctions en JavaScript.

Fonctions en JavaScript

En JavaScript, les fonctions sont des objets , mais il s'agit d'un type spécial d'objet appelé objets fonction . Nous pouvons travailler avec des fonctions comme nous le voulons – nous pouvons les affecter à une variable, nous pouvons les utiliser comme propriété d'objet, nous pouvons passer une fonction à un tableau ou en utiliser une comme élément de tableau, etc.

Le plus courant pour créer une fonction, et la façon dont nous utilisions beaucoup pour créer nos fonctions avant la sortie d'ES6 (la version d'ECMAScript qui a été lancée en juin 2015) était en utilisant un mot-clé function puis le nom de la fonction, suivie de parenthèses () . À l'intérieur de ces parenthèses, vous pouvez avoir un ou plusieurs paramètres comme vous le souhaitez, une paire d'accolades et, enfin, à l'intérieur, vous mettez votre code pour l'exécuter.

Avant la version ES6, et même jusqu'à maintenant, de nombreux développeurs écrivent toujours leurs fonctions de cette façon:

     function myName () {
      console.log ("Bonjour Leonardo");
    }

    monNom () // Bonjour Leonardo

À l'intérieur des parenthèses () vous pouvez avoir un ou plusieurs paramètres comme vous le souhaitez. Par exemple, si nous voulons que notre fonction affiche un bonjour avec notre nom, tout ce que nous devons faire est de passer un paramètre de nom à notre fonction, comme ceci:

     function myName (name) {
      console.log (`Bonjour $ {name}`);
    }

    myName ("Rodrigo") // Bonjour Rodrigo

Nous avons utilisé un modèle littéral, une autre fonctionnalité publiée avec ES6, qui nous permet d'incorporer des expressions dans des chaînes JavaScript.

Lorsque vous créez une nouvelle fonction sur votre application, la portée actuelle crée une nouvelle variable identifiant comme nom de fonction. Cette variable spécifique contient l'objet fonction, et nous pouvons ensuite l'appeler n'importe où et quand nous le voulons. Cette fonction simple reçoit un nom en tant que paramètre et renvoie, dans notre cas, un message sur la console avec le nom passé en paramètre.

Une bonne chose que beaucoup de développeurs ne connaissent pas concernant les fonctions est de savoir comment pour différencier les déclarations de fonction et les expressions de fonction. Fondamentalement, une déclaration de fonction est lorsque vous utilisez le mot clé function comme ceci:

     // Ceci est une déclaration de fonction
    fonction myName (nom) {
     console.log (`Bonjour $ {name`);
    }

Et, de l'autre côté, une expression de fonction ressemble à ceci:

     // Ceci est une expression de fonction
    const myName = fonction (nom) {
     console.log (`Bonjour $ {name`);
    }

Avec une déclaration de fonction, vous définissez une variable de fonction nommée sans affectation de variable; au lieu de commencer par une déclaration var, const ou let, vous commencez par un mot clé de la fonction . Une expression de fonction est assez différente – elle définit une nouvelle fonction comme faisant partie d'une autre expression, et la plupart du temps nous avons utilisé une variable pour cela.

Mais quels en sont exactement les avantages? Fondamentalement, lorsque vous utilisez une déclaration de fonction au lieu d'une expression de fonction, votre fonction sera connue avant l'exécution de tout code, vous permettant d'appeler une fonction avant de déclarer. C'est ce qu'on appelle hissage .

Maintenant que nous en savons un peu sur les fonctions en JavaScript, comprenons pourquoi tout commence à utiliser les fonctions fléchées, pourquoi elles sont si puissantes et comment elles peuvent rendre notre

Fonctions fléchées

En 2015, nous avions la version ES6, qui était une amélioration majeure de JavaScript et apportait beaucoup de nouvelles fonctionnalités au langage. Dans cette version, nous avons obtenu quelques modifications majeures, telles que:

1. Constantes – Maintenant, nous pouvons utiliser des constantes en JavaScript, une nouvelle façon de créer des valeurs qui ne peuvent être définies qu'une seule fois par étendue.
2. Littéraux de modèle – Une nouvelle façon de travailler avec des chaînes, nous permettant d'incorporer des variables et des expressions dans des chaînes.
3. Classes – L'une des parties les plus importantes de la programmation orientée objet, ES6 nous a également apporté des classes et permet nous pour les utiliser avec une syntaxe moderne.

ES6 était une grosse version et il a beaucoup amélioré le langage JavaScript et la communauté. D'une manière ou d'une autre, il est devenu beaucoup plus facile et plus amusant d'écrire du code JavaScript.

L'un des changements les plus importants que cette version nous a apporté concerne les fonctions flèches. C'est sans aucun doute l'une des fonctionnalités les plus populaires d'ES6 – nous pouvons maintenant créer des fonctions plus concises, plus propres et plus lisibles en utilisant l'opérateur => . Par exemple, voici à quoi ressemblerait une fonction simple en utilisant le mot clé function :

     // Ceci est une fonction simple
    fonction myCar (voiture) {
      console.log (`Ma voiture est une $ {voiture}`);
    }

Si nous utilisons une fonction flèche pour écrire cette fonction, voici à quoi cela ressemblerait:

     // Ceci est une fonction flèche
    const myCar = (car) => {
      console.log (`Ma voiture est une $ {voiture}`);
    }

Quelques différences que nous pourrions signaler dans notre fonction flèche: d'abord, après le nom de la fonction, vient un opérateur = puis des parenthèses ouvertes () et à l'intérieur de celles-ci entre parenthèses, nous pouvons avoir un ou plusieurs paramètres. Après les parenthèses, nous utilisons l'opérateur => puis faisons le reste normalement. Pour des fonctions plus concises, appelées fonctions pures, nous pouvons avoir une fonction flèche sur une seule ligne, comme ceci:

     const myCar = (car) => `Ma voiture est une $ {voiture}`;

Une chose à laquelle vous devez faire attention ici est les accolades. Si une fonction flèche a les accolades, vous aurez toujours besoin de la déclaration return à la fin de la fonction. Une autre chose vraiment sympa à propos des fonctions fléchées est: on peut omettre les parenthèses! Si nous avons un seul paramètre, nous pouvons omettre les parenthèses, ainsi notre fonction ressemblera à ceci:

     const myCar = car => `Ma voiture est une $ {car}`;

Beaucoup plus propre, non? Et voici un autre très bon point sur les fonctions flèches: vous n'avez plus besoin de lier ce . Une fonction de flèche lie lexicalement leur contexte, ce qui signifie qu'elle lie lexicalement la cette et la cette valeur fera toujours référence au contexte d'origine.

     this.cars.map (car => `Ceci est ma voiture $ {car}`);

Nous pouvons toujours avoir des fonctions anonymes en utilisant des fonctions fléchées, comme ceci:

     (num1, num2) => num1 + num2;

Quand faut-il utiliser les fonctions flèches?

Bien que les fonctions flèches soient un moyen puissant de créer des fonctions en JavaScript, nous devons faire attention et comprendre comment et quand utiliser les fonctions flèches au lieu de la fonction standard façon mot-clé. Les fonctions fléchées ont été créées pour simplifier les fonctions, ce qui rend notre portée plus facile à gérer, et également pour lier lexicalement cette valeur . ceci à l'intérieur d'un rappel. Mais si vous voulez gérer la cette valeur la meilleure façon est de ne pas utiliser les fonctions de flèche.

Pour lisibilité et concision du code, les fonctions fléchées sont la meilleure option. Ils rendent votre code plus propre et plus lisible, et, dans certains cas, vous pouvez avoir une fonction sur une seule ligne! Si vous prévoyez d'avoir une application moderne, avec un code plus lisible et plus propre, les fonctions fléchées pourraient être la meilleure option pour vous. Cela ne signifie pas que les déclarations de fonctions standard sont mauvaises et que vous ne devez pas les utiliser. Non! Les déclarations de fonctions standard sont un bon moyen de créer des fonctions en JavaScript, beaucoup de gens préfèrent toujours les utiliser au lieu des fonctions fléchées. Ce n'est qu'un point de vue de certains développeurs qui n'aiment pas beaucoup les fonctions fléchées.

Les fonctions standard et les fonctions fléchées ont quelques différences, mais l'objectif principal lorsque vous créez une fonction est toujours de créer la fonction la plus pure possible. Cela signifie qu'il renverra toujours la même valeur. Que vous utilisiez des fonctions standard ou des fonctions fléchées, cela n'a pas d'importance – il s'agit d'écrire toujours du code plus lisible et plus propre.

Conclusion

Dans cet article, nous avons découvert les fonctions fléchées en JavaScript, et comment nous pouvons améliorer la lisibilité et notre code en général en utilisant cette fonctionnalité introduite dans ES6. Nous avons également appris davantage sur les fonctions en général en JavaScript, sur la façon dont nous utilisions les fonctions avant la version ES6, et avons également appris certaines différences entre les fonctions standard et les fonctions fléchées.