La syntaxe des fonctions fléchées est apparue avec la publication de l’ECMAScript 2015, également connu sous le nom d’ES6. Aujourd’hui, les fonctions fléchées sont devenues la fonction préférée de nombreux programmeurs JavaScript. Cet engouement 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 normales, ainsi que les raisons pour lesquelles, dans la plupart des cas, il est préférable de s’en tenir aux fonctions normales.
1. Vous devez définir une fonction fléchée avant de l’utiliser
Il n’est pas possible d’appeler une fonction fléchée avant de l’utiliser. Les règles d’accrochage par défaut de JavaScript 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 contenant des fonctions, cela signifie que tout le code important se trouvera au bas du fichier.
Prenons l’exemple du code JavaScript suivant :
const doubleNumbers = (numbers) {
numbers.map(n => n * 2)
}
const halveNumbers = (numbers) {
numbers.map(n => n / 2)
}
const sumNumbers = (numbers) {
numbers.reduce((sum, n) => {
return sum + n;
}, 0)
}
const numbers = [1, 20, 300, 700, 1500]
const doubled = doubleNumbers(numbers)
console.log(halveNumbers(doubled))
console.log(sumNumbers(numbers))
Dans le bloc de code ci-dessus, le code important se trouve en bas. Les fonctions d’aide sont toutes définies avant le point d’exécution. Le fait de devoir créer vos fonctions JavaScript en haut du fichier peut s’avérer gênant, car vous devez faire défiler le texte pour voir le code qui effectue le travail.
Si vous avez déplacé les fonctions d’aide vers le bas et le code réel vers le haut, vous obtiendrez une erreur de référence. Le système d’exécution traite la fonction comme une variable. Vous devez donc la définir avant d’y accéder ou de l’invoquer. Mais si vous avez converti toutes les fonctions fléchées en fonctions normales (avec l’option fonction ), votre code fonctionnera parfaitement. En même temps, le code important reste en haut de la page, là où vous pouvez le trouver.
C’est l’un des plus gros problèmes liés à l’utilisation des fonctions fléchées. Elles n’ont pas de comportement d’hébergement. En d’autres termes, vous devez les définir avant l’endroit où vous les utiliserez. D’un autre côté, vous pouvez hisser 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 plutôt que des fonctions fléchées est la lisibilité. Les fonctions régulières sont plus faciles à lire parce qu’elles utilisent explicitement l’attribut fonction mot-clé. Ce mot-clé indique que le code en question est une fonction.
D’autre part, vous attribuez des fonctions fléchées à des variables. En tant que novice, vous pourriez être amené à penser que le code est une variable plutôt qu’une fonction.
Comparez les deux fonctions ci-dessous :
const halveNumbers = (numbers) => {
return numbers.map(n => n / 2)
}
function halveNumbers(numbers) {
return numbers.map(n => n / 2)
}
À première vue, on peut facilement dire que le deuxième morceau de code est une fonction. La syntaxe indique clairement qu’il s’agit d’une fonction. En revanche, le premier est ambigu : il est difficile de savoir 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 de flèche, la cette correspond à ce qui se trouve à l’extérieur de la chose dans laquelle nous nous trouvons. Dans la plupart des cas, il s’agit de l’objet fenêtre.
Considérons l’objet suivant :
const person = {
firstName: "Kyle",
lastName: "Cook",
printName: () => {
console.log(`${this.firstName}` `${this.lastName}` )
}
}
person.printName()
Si vous exécutez le code, vous remarquerez que le navigateur imprime undefined pour le prénom et le nom. Puisque nous utilisons une fonction flèche, cette correspond à l’objet fenêtre. Il n’y a pas non plus de prénom ou Nom de famille est définie ici.
Pour résoudre ce problème, vous devez utiliser une fonction normale :
const person = {
firstName: "Kyle",
lastName: "Cook",
printName: function() {
console.log(`${this.firstName}` `${this.lastName}` )
}
}
person.printName()
Cela fonctionnera très bien parce que ce se réfère à la personne objet. Si vous avez l’intention de faire souvent ce type de programmation orientée objet, vous devrez vous assurer que vous utilisez des fonctions normales. Les fonctions fléchées ne fonctionnent pas.
Quand utiliser les fonctions fléchées
Les fonctions fléchées sont principalement utilisées lorsque vous avez besoin d’une fonction anonyme. Un exemple d’un tel scénario est la gestion d’une fonction de rappel (callback). Il est préférable d’utiliser une fonction fléchée lors de l’écriture d’une fonction de rappel, car la syntaxe est beaucoup plus simple que celle d’une fonction complète.
Comparez ces deux exemples et décidez lequel est le plus simple :
function halveNumbers(numbers) {
return numbers.map(n => n / 2)
}
function halveNumbers(numbers) {
return numbers.map(function(n) {
return n / 2
})
}
Dans les deux cas, une fonction de rappel est passée à la méthode map(). Mais la première fonction de rappel est une fonction fléchée alors que la seconde est une fonction complète. Vous pouvez constater que la première fonction occupe moins de lignes de code que la seconde : trois contre cinq.
L’autre occasion d’utiliser des fonctions fléchées est lorsque vous souhaitez traiter une syntaxe « this » particulière. L’objet « this » changera selon que vous utilisez des fonctions normales ou des fonctions fléchées pour des choses particulières.
Le bloc de code suivant enregistre deux récepteurs d’événements « click » sur l’objet document. La première instance utilise une fonction normale 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("click", function(e) {
console.log("FUNCTION", this, e.target)
})
document.addEventListener("click", (e) => {
console.log("ARROW", this, e.target)
})
Si vous exécutez ce script, vous remarquerez que la référence « this » est différente dans les deux cas. Pour la fonction normale, cette propriété fait référence au document, qui est le même que celui de la fonction e.target . Mais pour la fonction « arrow », cette propriété fait référence à l’objet « window ».
Lorsque vous utilisez une fonction normale comme rappel, cela fait référence à l’élément où nous déclenchons l’événement. Mais lorsque vous utilisez une fonction arrow, ce mot-clé fait référence par défaut à l’objet window.
En savoir plus sur les fonctions fléchées et les fonctions normales
Il existe plusieurs autres différences subtiles entre les fonctions régulières et les fonctions fléchées. La maîtrise de ces deux types de fonctions est essentielle à la maîtrise de JavaScript. Apprenez quand utiliser l’une 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.