6 différences entre les fonctions fléchées et les fonctions ordinaires en JavaScript

Les fonctions sont une partie essentielle de JavaScript que vous devez utiliser pour écrire du code réutilisable. Les deux principaux types de fonctions sont les fonctions régulières et les fonctions fléchées, et il existe de nombreuses façons de les définir.

Même si elles répondent à des besoins similaires, elles présentent quelques différences essentielles qui peuvent influencer fondamentalement la façon dont vous les utilisez dans votre code. Découvrez les différences entre les fonctions fléchées et les fonctions normales.

1. Différences de syntaxe

La syntaxe que vous choisissez lorsque vous développez des fonctions JavaScript a un impact important sur la facilité de lecture et de compréhension de votre code. La syntaxe des fonctions régulières et des fonctions fléchées diffère considérablement, ce qui a un impact sur la façon dont vous les écrivez et les utilisez.

Les fonctions fléchées JavaScript utilisent une structure de langage plus petite et plus compréhensible. Vous pouvez les utiliser pour créer des fonctions en les combinant dans une seule expression ou déclaration.

Dans cet exemple, la fonction ajouter accepte deux entrées, a et b, et renvoie leur total. Les => indique qu’il s’agit d’une fonction fléchée.

En revanche, la définition d’une fonction régulière nécessite l’utilisation du signe de la fonction avec une syntaxe plus verbeuse, comme le montre cet exemple :

Dans cet exemple, le mot-clé fonction définit une fonction régulière qui utilise également des accolades et le mot-clé return .

Les fonctions régulières sont plus utiles pour une syntaxe complexe nécessitant plusieurs instructions ou expressions. En revanche, les fonctions fléchées utilisent une syntaxe plus concise qui peut rendre votre code plus facile à lire et à comprendre.

2. Différences de portée

Le terme « scoping » décrit la manière dont les variables et fonctions internes d’une fonction sont accessibles. En JavaScript, vous définissez et accédez aux variables et aux fonctions dans l’ensemble de votre code à l’aide du scoping. Leur portée distincte peut avoir un impact significatif sur la façon dont vous écrivez et utilisez les fonctions fléchées et régulières de JavaScript.

Dans le cadrage, la façon dont les fonctions fléchées gèrent la fonction cette diffère sensiblement de celle des fonctions normales. Les fonctions normales définissent le mot-clé this lui-même ; il peut donc changer en fonction du contexte dans lequel vous invoquez la fonction.

D’autre part, parce qu’ils ne spécifient pas le mot-clé ce les fonctions fléchées utilisent le même this que la portée statique qui les entoure.

Pour voir la différence, regardez l’exemple suivant. Supposons que vous ayez un personne avec un objet nom et une méthode appelée sayName() qui enregistre le nom de la personne à l’aide d’une fonction normale :

Ici, la fonction régulière sayName() est une méthode de l’objet personne et la fonction ce à l’intérieur de cette fonction fait référence à l’objet personne.

Essayons maintenant la même chose avec une fonction arrow :

Parce que la fonction arrow utilisée dans la fonction sayName() ne définit pas sa propre fonction this elle utilise le mot-clé ce de la portée statique qui l’entoure. Dans ce cas, il s’agit de la portée globale de l’instance.

Par conséquent, lorsque vous appelez personne.direNom(), vous obtenez non défini plutôt que « Jean ». Cela peut avoir un impact significatif sur la manière dont vous écrivez et utilisez les fonctions dans votre code.

3. Cas d’utilisation et meilleures pratiques

Les fonctions régulières sont mieux adaptées aux fonctions qui requièrent leur propre ce comme les méthodes d’un objet.

Les fonctions fléchées sont mieux adaptées à la programmation fonctionnelle et aux rappels qui ne requièrent pas l’utilisation du mot clé ce mot-clé.

4. Différences de liaison des fonctions

La liaison de fonctions est le terme utilisé pour décrire la relation entre cette et les fonctions dans votre code. Les variations dans la liaison de fonction entre les fonctions fléchées et les fonctions normales peuvent avoir un impact important sur la façon dont vous construisez et utilisez les fonctions fléchées.

L’utilisation du mot-clé cette la rend unique dans les fonctions régulières et l’associe à divers objets en fonction de la méthode utilisée pour appeler la fonction. L’association de fonctions est l’une des distinctions les plus importantes entre les fonctions régulières et les fonctions fléchées.

En revanche, les fonctions fléchées n’ont pas de cette Elles l’obtiennent plutôt des champs d’application environnants.

Prenons un exemple pour mieux comprendre cette différence. Supposons que vous ayez un personne avec un objet nom et une méthode appelée sayName() qui utilise une fonction normale pour enregistrer le nom de la personne :

Dans cet exemple, vous appelez la fonction sayName() de l’objet personne avec la valeur autrepersonne en utilisant la méthode call() . Pour cette raison, la méthode sayName() est une méthode, this Le mot-clé est lié à la méthode autrePersonne et il enregistre « Jeanne » plutôt que « Jean.«

Utilisons maintenant la même chose avec une fonction de flèche :

Puisque le sayName() n’a pas son propre mot-clé, vous utilisez dans cet exemple une fonction fléchée à l’intérieur de celle-ci. Dans ce cas, la fonction flèche hérite des propriétés de la portée environnante, qui est la portée globale.

Cela signifie que lorsque vous exécutez person.sayName.call(anotherPerson) la fonction flèche this reste l’objet global, et non défini prend la place de Jane dans le journal.

Si vous avez besoin de lier une fonction à un élément spécifique de l’application spécifique. une fonction ordinaire peut être préférable. Cependant, si vous n’avez pas besoin de lier une fonction à une valeur spécifique de cette une fonction fléchée peut être plus courte et plus facile à comprendre.

5. Retour implicite

Les fonctions fléchées ont une fonction de retour implicite. Si le corps de la fonction consiste en une seule expression, la fonction renvoie cette expression.

A titre d’exemple :

Cette fonction fléchée renvoie un double à partir d’un paramètre. Il n’est pas nécessaire d’utiliser une expression explicite explicite. car le corps de la fonction ne comporte qu’une seule expression.

6. Différences de compatibilité

Les différences de compatibilité concernent les fonctions fléchées ajoutées par ECMAScript 6, qui peuvent ne pas fonctionner avec les anciens navigateurs ou environnements. D’autre part, les fonctions régulières existent depuis le début de JavaScript et sont largement prises en charge.

Voici une illustration d’une fonction fléchée qui peut ne pas fonctionner dans des conditions plus établies :

Voici une fonction régulière comparable qui devrait fonctionner dans la plupart des situations :

Utilisez des fonctions régulières plutôt que des fonctions fléchées lorsque vous ciblez des environnements plus anciens, afin d’assurer la compatibilité. Toutefois, les fonctions fléchées peuvent fournir une syntaxe plus facile à comprendre et plus condensée pour les navigateurs et les environnements modernes.

Choisir entre les fonctions fléchées et les fonctions régulières en JavaScript

En JavaScript, les fonctions fléchées et régulières ont des caractéristiques et des applications distinctes. Les fonctions fléchées ont une syntaxe simple, héritant de la fonction de ce du contexte de leur utilisation, tandis que les fonctions régulières sont plus adaptables et peuvent traiter des situations plus complexes.

Il est essentiel de connaître leurs différences et de savoir comment les utiliser en fonction des exigences de votre code. Lorsque vous choisissez le type de fonction à utiliser, vous devez également tenir compte des différences de compatibilité.

En fin de compte, les fonctions fléchées et régulières de JavaScript sont des outils puissants qui vous aident à écrire un code plus propre et plus efficace.

S’abonner à notre lettre d’information