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.
const add = (a, b) => a + b;
Dans cet exemple, la fonction ajouter Cette fonction accepte deux entrées, a et b, et renvoie leur total. Les => ; définit cette fonction comme une fonction fléchée.
En revanche, la définition d’une fonction régulière nécessite l’utilisation de la fonction fonction avec une syntaxe plus verbeuse, comme le montre cet exemple :
function add(a, b) {
return a + b;
}
Dans cet exemple, le mot-clé fonction définit une fonction régulière qui utilise également les accolades et le mot-clé return déclaration.
Les fonctions régulières sont plus utiles pour les syntaxes complexes 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 manière dont vous écrivez et utilisez les fonctions fléchées et régulières de JavaScript.
Dans le scoping, la façon dont les fonctions flèches gèrent la fonction ce diffère considérablement de la façon dont les fonctions normales fonctionnent. Les fonctions normales définissent le mot-clé ce eux-mêmes ; 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 mot-clé ce comme la portée statique qui les entoure.
Pour voir la différence, regardez l’exemple suivant. Supposons que vous ayez un personne objet avec un nom et une méthode appelée sayName() qui enregistre le nom de la personne à l’aide d’une fonction normale :
const person = {
name: 'John,'
sayName: function() {
console.log(this.name);
}
};
person.sayName(); // logs 'John'
Ici, la fonction régulière sayName() est une méthode de l’objet personne et la fonction cette à l’intérieur de cette fonction fait référence à l’objet personne.
Essayons maintenant de faire la même chose avec une fonction arrow :
const person = {
name: 'John',
sayName: () => {
console.log(this.name);
}
};
person.sayName(); // logs undefined
Parce que la fonction flèche utilisée dans l’exemple sayName() La méthode ne définit pas son propre cette il 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 bonnes pratiques
Les fonctions régulières sont mieux adaptées aux fonctions qui nécessitent 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 nécessitent pas de ce mot-clé.
4. Différences de liaison des fonctions
La liaison fonctionnelle est le terme utilisé pour décrire la relation entre cette et les fonctions dans votre code. Les variations dans la liaison des fonctions 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.
Utilisation de la fonction ce 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 ce mais plutôt à partir des champs d’application environnants.
Prenons un exemple pour mieux comprendre cette différence. Supposons que vous ayez un personne objet avec un nom et une méthode appelée sayName() qui utilise une fonction régulière pour enregistrer le nom de la personne :
const person = {
name: 'John',
sayName: function() {
console.log(this.name);
}
};
const anotherPerson = {
name: 'Jane'
};
person.sayName.call(anotherPerson); // logs 'Jane'
Dans cet exemple, vous appelez la fonction sayName() avec la valeur autrePersonne en utilisant le call() . Pour cette raison, la méthode sayName() méthode, cette, le mot-clé est lié au mot-clé autrePersonne et il enregistre « Jane » plutôt que « Jean. »
Utilisons maintenant la même chose avec une fonction flèche :
const person = {
name: 'John',
sayName: () => {
console.log(this.name);
}
};
const anotherPerson = {
name: 'Jane'
};
person.sayName.call(anotherPerson); // logs undefined
Puisque la fonction sayName() La technique sayName() n’a pas son propre mot-clé, vous utilisez une fonction arrow à l’intérieur de cette technique dans cet exemple. 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 cette 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 la liste des ce une fonction ordinaire peut être préférable. Cependant, si vous n’avez pas besoin de lier une fonction à une valeur spécifique de ce une fonction fléchée pourrait être plus courte et plus facile à comprendre.
5. Retour implicite
Les fonctions Arrow sont dotées d’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 :
const double = (x) => x * 2;
Cette fonction fléchée renvoie un double à partir d’un paramètre. Il n’est pas nécessaire d’utiliser un retour car le corps de la fonction ne contient 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. En revanche, 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 pourrait ne pas fonctionner dans des conditions plus établies :
const add = (a, b) => a + b;
Voici une fonction régulière comparable qui devrait fonctionner dans la plupart des situations :
function add(a, b) {
return a + b;
}
Utilisez les fonctions régulières plutôt que les fonctions fléchées lorsque vous ciblez des environnements plus anciens afin d’assurer la compatibilité. Cependant, les fonctions fléchées peuvent fournir une syntaxe plus facile à comprendre et plus condensée lorsque l’on travaille avec des navigateurs et des 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 des fonctions de cette Le terme « mot-clé » provient du contexte de son utilisation alors que les fonctions régulières sont plus adaptables et peuvent faire face à 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.
