Pourquoi vous devriez être prudent en utilisant les fonctions fléchées en JavaScript

La syntaxe de la fonction fléchée est arrivée avec la sortie d'ECMAScript 2015, également connue sous le nom d'ES6. Aujourd'hui, les fonctions fléchées sont devenues la fonctionnalité préférée de nombreux programmeurs JavaScript. Cet amour pour les fonctions fléchées est dû à la syntaxe concise et au comportement direct du mot-clé "this".

Mais les fonctions fléchées présentent certains inconvénients. Découvrez les principales différences entre les fonctions fléchées et les fonctions régulières et découvrez pourquoi, dans la plupart des cas, il vaut mieux s'en tenir aux fonctions régulières.

1. Vous devez définir une fonction de flèche avant de l'utiliser

Vous ne pouvez pas hisser une fonction fléchée. Règles de levage par défaut de JavaScript vous permettent d'appeler une fonction avant de la définir, mais ce n'est pas le cas avec les fonctions fléchées. Si vous avez un fichier JavaScript avec des fonctions, cela signifierait que tout le code important sera en bas du fichier.

Prenons par exemple le code JavaScript suivant :

constante nombresdoubles = (nombres) { 
 nombres.map(n => n * 2)
}
constante moitiéNombres = (nombres) { 
 nombres.map(n => n / 2)
}
constante sommeNombres = (nombres) { 
 nombres.réduire((somme, n) => { 
retour somme + n; 
 }, 0)
}
constante nombres = [1, 20, 300, 700, 1500]
constante doublé = doubleNumbers (nombres)
console.log (halveNumbers (doublé))
console.log (sumNumbers (nombres))

Dans le bloc de code ci-dessus, le code important est en bas. Les fonctions d'assistance sont toutes définies avant le point d'exécution. Avoir à créer vos fonctions JavaScript en haut du fichier peut être gênant car vous devrez faire défiler vers le bas pour voir le code réel qui fait le travail.

Si vous avez déplacé les fonctions d'assistance vers le bas et le code réel vers le haut, vous obtiendrez une erreur de référence. Le runtime traite la fonction comme une variable. Ainsi, vous devez d'abord le définir avant d'y accéder ou de l'invoquer. Mais si vous convertissez toutes les fonctions fléchées en fonctions régulières (avec le fonction mot-clé), alors votre code fonctionnera bien. En même temps, le code important reste en haut où vous pouvez le localiser.

C'est l'un des plus gros problèmes avec l'utilisation des fonctions fléchées. Ils ne présentent aucun comportement d'hébergement. En d'autres termes, vous devez les définir avant l'endroit où vous les utiliserez. D'autre part, vous pouvez lever des fonctions régulières.

2. Les fonctions fléchées peuvent être déroutantes pour certaines personnes

Une autre raison d'utiliser des fonctions régulières au lieu des fonctions fléchées est la lisibilité. Les fonctions régulières sont plus faciles à lire car elles utilisent explicitement le fonction mot-clé. Ce mot clé identifie que le code en question est une fonction.

D'autre part, vous affectez des fonctions fléchées aux variables. En tant que débutant, cela pourrait vous amener à penser que le code est une variable plutôt qu'une fonction.

Comparez les deux fonctions ci-dessous :

constante réduire de moitié les nombres = (Nombres) => {
retour nombres.map(n => n / 2)
}
fonctionréduire de moitié les nombres(Nombres) { 
retour nombres.map(n => n / 2)
}

À première vue, vous pouvez facilement dire que le deuxième morceau de code est une fonction. La syntaxe indique clairement que le code est une fonction. Cependant, le premier est ambigu - vous ne pouvez pas facilement dire s'il s'agit d'une variable ou d'une fonction.

3. Vous ne pouvez pas utiliser les fonctions fléchées comme méthodes

Lorsque vous utilisez une fonction fléchée, le ce le mot-clé correspond à tout ce qui est en dehors de la chose dans laquelle nous sommes. Dans la plupart des cas, il s'agit de l'objet window.

Considérez l'objet suivant :

constante personne = {
 prénom: " Kyle ",
 nom de famille: "Cuisiner",
 printName: () => {
console.enregistrer(`${ce.prénom}``${ce.nom de famille}` )
 }
}
personne.printName()

Si vous exécutez le code, vous remarquerez que le navigateur imprime indéfini pour le prénom et le nom de famille. Puisque nous utilisons une fonction fléchée, ce Le mot-clé correspond à l'objet window. Aussi, il n'y a pas prénom ou nom de famille propriété qui y est définie.

Pour résoudre ce problème, vous devez utiliser une fonction normale à la place :

constante personne = {
 prénom: " Kyle ",
 nom de famille: "Cuisiner",
 printName: fonction() {
console.enregistrer(`${ce.prénom}``${ce.nom de famille}` )
 }
}
personne.printName()

Cela va bien fonctionner parce que ce se réfère à la personne objet. Si vous allez faire beaucoup ce genre de programmation orientée objet, alors vous devrez vous assurer que vous utilisez des fonctions régulières. Les fonctions fléchées ne fonctionneront pas.

Quand utiliser les fonctions fléchées

Utilisez les fonctions fléchées principalement aux endroits où vous avez besoin d'une fonction anonyme. Un exemple d'un tel scénario concerne une fonction de rappel. Il est préférable d'utiliser une fonction fléchée lors de l'écriture d'un rappel car la syntaxe est tellement plus simple que d'écrire une fonction complète.

Comparez ces deux et décidez lequel est le plus simple :

fonctionréduire de moitié les nombres(Nombres) {
retour nombres.map(n => n / 2)
}
fonctionréduire de moitié les nombres(Nombres) {
retour nombres.map(fonction(n) {
retour n / 2
 })
}

Les deux cas passent une fonction de rappel à la méthode map(). Mais le premier rappel est une fonction fléchée tandis que le second est une fonction complète. Vous pouvez voir comment la première fonction prend moins de lignes de code que la seconde fonction: trois contre cinq.

L'autre fois où utiliser les fonctions fléchées, c'est chaque fois que vous voulez traiter une syntaxe "this" particulière. L'objet "cet" changera selon que vous utilisez des fonctions régulières ou des fonctions fléchées pour des choses particulières.

Le bloc de code suivant enregistre deux écouteurs d'événement "click" sur l'objet document. La première instance utilise une fonction régulière comme rappel, tandis que la seconde utilise une fonction fléchée. Dans les deux rappels, le code enregistre l'objet d'exécution (this) et la cible de l'événement :

document.addEventListener("Cliquez sur", fonction(e) {
console.enregistrer("FONCTION", ce, e.cible)
})
document.addEventListener("Cliquez sur", (e) => {
console.enregistrer("FLÈCHE", ce, e.cible)
})

Si vous deviez exécuter ce script, vous remarquerez que "cette" référence est différente pour les deux. Pour la fonction normale, cette propriété fait référence au document, qui est identique à la e.cible propriété. Mais pour la fonction flèche, cela fait référence à l'objet fenêtre.

Lorsque vous utilisez une fonction régulière comme rappel, cela fera référence à l'élément où nous déclenchons l'événement. Mais lorsque vous utilisez une fonction fléchée, ce mot-clé est par défaut l'objet window.

En savoir plus sur les fonctions fléchées par rapport aux fonctions régulières

Il existe plusieurs autres différences subtiles entre les fonctions régulières et les fonctions fléchées. La maîtrise des deux types de fonctions est fondamentale pour maîtriser JavaScript. Apprenez quand utiliser l'un et quand utiliser l'autre; vous comprendrez alors les implications de l'utilisation d'une fonction régulière ou d'une fonction fléchée dans votre JavaScript.