Fonctions fléchées vs. Fonctions régulières en JavaScript

Comme presque tous les langages de programmation modernes, JavaScript offre des moyens de créer des fonctions pour permettre la réutilisation du code. Pour ceux qui ne connaissent pas le langage, il existe deux manières différentes de déclarer une fonction en JavaScript.

A l'origine, le fonction mot-clé a été utilisé, et plus tard, la syntaxe de la flèche a été créée. Bien que différents dans l'accessibilité de la portée, le mot-clé de la fonction et la syntaxe de la flèche créent des résultats similaires.

L'incapacité à faire la distinction entre les deux peut entraîner des problèmes et entraîner une utilisation incorrecte. Il est nécessaire pour le développeur JS moderne de comprendre comment chaque déclaration de fonction affecte la portée et la visibilité.

Que sont les fonctions fléchées de JavaScript?

Les fonctions fléchées de JavaScript sont une autre façon de définir des fonctions qui n'utilisent pas la valeur par défaut fonction mot-clé:

fonctionjournalMessage(message) {
console.log (message);
}
constante journalMessage = (message) => {
console.log (message);
}
constante journalMessage = message =>console.log (message);

Ci-dessus, vous pouvez voir le même message écrit de trois manières différentes. La première utilise la méthode de déclaration de fonction régulière. Les deux suivants montrent les deux manières d'utiliser les fonctions fléchées de l'ES6.

JavaScript a d'abord adopté la syntaxe de la fonction fléchée avec la publication des normes ECMAScript 2015. Les fonctions fléchées offraient un moyen clair et concis de créer rapidement des fonctions et une solution intéressante à plusieurs problèmes de portée de longue date dans JavaScript.

Ces fonctionnalités ont rapidement fait des fonctions fléchées un succès auprès de nombreux développeurs. Les programmeurs qui étudient une base de code JavaScript moderne sont tout aussi susceptibles de trouver des fonctions fléchées que des fonctions régulières.

En quoi les fonctions fléchées sont-elles différentes des fonctions régulières en JavaScript?

À première vue, les fonctions fléchées ne semblent pas très différentes des fonctions déclarées à l'aide du mot-clé function. En dehors de la syntaxe, les deux encapsulent un ensemble réutilisable d'actions qui peuvent être appelées depuis n'importe où dans le code.

Malgré les similitudes entre les deux, cependant, il existe certaines différences dont les développeurs doivent être conscients.

Différence de portée

Chaque fois qu'une fonction régulière est déclarée en JavaScript, cela la fonction fonctionne comme une fermeture qui crée sa propre portée. Cela peut causer un problème lors de l'utilisation de certaines fonctions spécialisées telles que setTimeout et setInterval.

Avant ES6, il existait un nombre important de solutions de contournement qui hissaient les éléments à des niveaux de portée plus élevés pour une utilisation dans les rappels. Ces hacks fonctionnaient, mais ils étaient souvent difficiles à comprendre et pouvaient causer des problèmes d'écrasement de certaines variables.

Les fonctions fléchées ont résolu les deux problèmes de manière simple et élégante. Lorsqu'une fonction fléchée est utilisée dans le cadre d'un rappel, elle a accès à la même portée que la fonction à partir de laquelle elle a été appelée.

Cela permettait aux fonctions d'être utilisées comme rappels sans perdre l'accès au contexte dans lequel l'événement d'origine était appelé. Comme simple test pour montrer ce principe en action, vous pouvez mettre en place une fonction de messagerie différée comme celle ci-dessous :

fonctionmessage retardé(message, retard) {

 setTimeout(fonction(message) {
console.log (message);
 }, retard);
}
message retardé("Bonjour le monde", 1000);

La fonction est simple, acceptant message et retard en millisecondes. Une fois le délai écoulé, il doit consigner le message dans la console. Cependant, lorsque le code est exécuté, indéfini sera connecté à la console au lieu du message qui a été transmis.

Lorsque la fonction de rappel est exécutée, la portée change et le message d'origine n'est plus accessible. L'utilisation du message à partir de la fermeture nécessite que le message soit hissé dans une variable globale, ce qui peut entraîner son écrasement avant le rappel.

Une fonction de flèche est une solution appropriée pour ce problème. Si vous remplacez le premier argument de setTimeout, la portée peut être conservée et la fonction aura accès au message passé à message retardé.

fonctionmessage retardé(message, retard) {

 setTimeout(() => {
console.log (message);
 }, retard);
}
message retardé("Bonjour le monde", 1000);

Maintenant, une fois exécuté, le message retardé la fonction enregistrera le message. De plus, cela permet à plusieurs messages d'être mis en file d'attente avec des délais différents, et ils se produiront tous au bon moment.

Cela est dû au fait qu'à chaque fois message retardé est utilisé, il génère sa propre portée avec sa propre copie de la fonction de flèche interne.

Lisibilité du code

Bien que les fonctions fléchées soient utiles comme rappels, elles sont également utilisées pour garder le code propre et concis. Dans la section ci-dessus, vous pouvez voir que l'utilisation d'une fonction fléchée rend évident ce qui se passera lorsque le message retardé fonction est appelée.

Au fur et à mesure que les fonctions deviennent plus complexes, avoir un peu de clarté peut rendre le code beaucoup plus lisible. Lors de la composition d'objets, cela peut simplifier le code lors de l'ajout de fonctions courtes :

classecomptoir{
 _count = 0 ;
 incrément = () => {
ce._count += 1;
 }
 décrémenter = () => {
ce._count -= 1;
 }
 compter = () => {
retource._compter;
 }
}
laisser ct = nouveau comptoir();

Rôle dans la programmation orientée objet

Bien que les fonctions fléchées de JavaScript fassent partie intégrante de la programmation fonctionnelle, elles ont également leur place dans programmation orientée objet. Les fonctions fléchées peuvent être utilisées dans les déclarations de classe :

classeorderLineItem{
 _LineItemID = 0 ;
 _Produit = {} ;
 _Qté = 1 ;
constructeur(produit) {
ce._LineItemID = crypto.randomUUID();
ce._Produit = produit
 }
 changeLineItemQuantity = (nouvelleQté) => {
ce._Qté = nouvelleQté ;
 }
}

L'utilisation d'une fonction fléchée pour déclarer des méthodes dans une déclaration de classe ne modifie pas le comportement de la fonction au sein de la classe. En dehors de la classe, cependant, il expose la fonction, lui permettant d'être utilisée par d'autres classes.

Les fonctions régulières ne sont pas accessibles en dehors de la déclaration de classe sans être appelées. Cela signifie que si d'autres déclarations de classe peuvent hériter de ces fonctions, elles ne sont pas accessibles directement pour composer d'autres classes.

Quand devriez-vous utiliser les fonctions fléchées de JavaScript?

Les fonctions fléchées de JavaScript sont une fonctionnalité incroyablement puissante qui donne aux développeurs beaucoup plus de contrôle sur la portée à laquelle une fonction a accès. Savoir quand un rappel devrait avoir accès à la portée de son parent, et quand il ne devrait pas, peut aider un développeur à déterminer le type de déclaration à utiliser.

Les fonctions fléchées offrent aux programmeurs un moyen clair et concis d'écrire des rappels sans exposer les parties de la portée qui devraient être masquées. Ils permettent également la création de compositions propres et simples, permettant en outre une programmation fonctionnelle en JavaScript.

Les développeurs JS doivent être conscients des différences entre les deux syntaxes et savoir quelle syntaxe est appropriée lors de la déclaration de leurs fonctions.