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 sont pas familiers avec le langage, il existe deux manières différentes de déclarer une fonction en JavaScript.
À l’origine, la fonction fonction a été utilisé, et plus tard, la syntaxe de la flèche a été créée. Bien qu’ils diffèrent en termes d’accessibilité, le mot-clé function et la syntaxe arrow donnent des résultats similaires.
L’incapacité à faire la distinction entre les deux peut causer des problèmes et conduire à 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 un moyen alternatif de définir des fonctions qui n’utilisent pas les fonctions par défaut. fonction mot-clé :
function logMessage(message) {
console.log(message);
}
const logMessage = (message) => {
console.log(message);
}
const logMessage = 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 habituelle. Les deux suivantes montrent les deux façons d’utiliser les fonctions fléchées de ES6.
JavaScript a adopté pour la première fois la syntaxe des fonctions fléchées lors de la publication des normes ECMAScript 2015. Les fonctions fléchées offraient un moyen propre et concis de créer rapidement des fonctions, ainsi qu’une solution intéressante à plusieurs problèmes de portée de longue date dans JavaScript.
Ces caractéristiques ont rapidement fait des fonctions fléchées un succès auprès de nombreux développeurs. Les programmeurs qui consultent une base de code JavaScript moderne ont autant de chances de trouver des fonctions fléchées que des fonctions normales.
En quoi les fonctions fléchées sont-elles différentes des fonctions ordinaires 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 d’actions réutilisables qui peuvent être appelées à partir d’autres endroits du code.
Malgré les similitudes entre les deux, il existe quelques différences que les développeurs doivent connaître.
Différence de champ d’application
Chaque fois qu’une fonction normale est déclarée en JavaScript, cette fonction fonctionne comme une fermeture qui crée sa propre portée. Cela peut poser 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 permettaient de hisser des éléments à des niveaux de portée plus élevés afin de les utiliser dans des callbacks. Ces solutions fonctionnaient, mais elles étaient souvent difficiles à comprendre et pouvaient causer des problèmes d’écrasement de certaines variables.
Les fonctions fléchées résolvent ces deux problèmes de manière simple et élégante. Lorsqu’une fonction arrow est utilisée dans le cadre d’un callback, elle a accès à la même portée que la fonction à partir de laquelle elle a été appelée.
Cela permet d’utiliser des fonctions en tant que rappel sans perdre l’accès au contexte dans lequel l’événement original a été appelé. Pour tester simplement ce principe en action, vous pouvez mettre en place une fonction de messagerie différée comme celle décrite ci-dessous :
function delayedMessage(message, delay) {
setTimeout(function(message) {
console.log(message);
}, delay);
}
delayedMessage("Hello World", 1000);
La fonction est simple, elle accepte message et retard en millisecondes. Une fois le délai écoulé, le message devrait être enregistré dans la console. Cependant, lorsque le code est exécuté, undefined sera enregistré dans la console à la place du message passé.
Lorsque la fonction de rappel est exécutée, la portée change et le message original n’est plus accessible. L’utilisation du message à l’intérieur de la fermeture nécessite que le message soit hissé dans une variable globale, ce qui pourrait entraîner son écrasement avant la fonction de rappel.
Une fonction flèche est une solution appropriée à ce problème. Si vous remplacez le premier argument de setTimeoutla portée peut être maintenue, et la fonction aura accès au message passé à delayedMessage.
function delayedMessage(message, delay) {
setTimeout(() => {
console.log(message);
}, delay);
}
delayedMessage("Hello World", 1000);
Or, une fois exécuté, le delayedMessage enregistre le message. En outre, cela permet de mettre en file d’attente plusieurs messages avec des délais différents, et ils se produiront tous au bon moment.
Ceci est dû au fait qu’à chaque fois que delayedMessage est utilisée, elle génère sa propre portée avec sa propre copie de la fonction flèche interne.
Lisibilité du code
Bien que les fonctions fléchées soient utiles en tant que 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 la fonction delayedMessage est appelée.
Au fur et à mesure que les fonctions deviennent plus complexes, un peu de clarté peut rendre le code beaucoup plus lisible. Lors de la composition d’objets, cela peut simplifier le code en ajoutant des fonctions courtes :
class counter {
_count = 0;
increment = () => {
this._count += 1;
}
decrement = () => {
this._count -= 1;
}
count = () => {
return this._count;
}
}
let ct = new counter();
Rôle dans la programmation orientée objet
Si les fonctions fléchées de JavaScript font partie intégrante de la programmation fonctionnelle, elles ont également leur place dans la programmation orientée objet. Les fonctions fléchées peuvent être utilisées dans les déclarations de classes :
class orderLineItem {
_LineItemID = 0;
_Product = {};
_Qty = 1;
constructor(product) {
this._LineItemID = crypto.randomUUID();
this._Product = product
}
changeLineItemQuantity = (newQty) => {
this._Qty = newQty;
}
}
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 revanche, en dehors de la classe, la fonction est exposée, ce qui permet à d’autres classes de l’utiliser.
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 peuvent pas être accédées directement pour composer d’autres classes.
Quand utiliser les fonctions fléchées de JavaScript ?
Les fonctions fléchées de JavaScript sont une fonctionnalité incroyablement puissante qui permet aux développeurs de mieux contrôler la portée à laquelle une fonction a accès. Savoir quand un callback doit avoir accès à la portée de son parent, et quand il ne le doit pas, peut aider un développeur à déterminer quel type de déclaration utiliser.
Les fonctions fléchées offrent aux programmeurs un moyen clair et concis d’écrire des rappels sans exposer des parties de la portée qui devraient être cachées. Elles permettent également de créer des compositions propres et simples, favorisant ainsi la programmation fonctionnelle en JavaScript.
Les développeurs JS doivent être conscients des différences entre les deux syntaxes et être attentifs à la syntaxe appropriée lorsqu’ils déclarent leurs fonctions.
