() => {} vs function
Une fonction ordinaire a son propre this et arguments, et peut être appelée avec new. Une fonction fléchée est plus courte et prend son this de l’environnement.
Comparaison point par point
#this propre
arguments propre
Appel avec new
Appel avant la déclaration
Return implicite
Peut être une fonction génératrice
Usage typique
Exemple
#console.log(double(5))
function double(n) {
return n * 2
}
const triple = (n) => n * 3
console.log(triple(5))Définition et utilisation
#Les deux formes définissent une fonction : elles acceptent des paramètres, exécutent des instructions et peuvent renvoyer un résultat avec return. La déclaration function et l’expression function () {} ont leur propre this et arguments, qui dépendent de la façon dont elles sont appelées, alors qu’une fonction fléchée () => {} n’a ni l’un ni l’autre : elle prend this du code où elle a été écrite.
Les déclarations function sont entièrement remontées (hoisting), donc vous pouvez les appeler plus haut dans le fichier qu’à l’endroit où elles sont écrites. Une flèche, généralement assignée à const, ne fonctionne qu’à partir de la ligne d’affectation. Une fonction ordinaire peut aussi être appelée avec new comme constructeur, mais pas une flèche : une telle tentative lève une TypeError. En revanche, une flèche permet d’omettre les accolades et return pour un corps à une seule expression.
Dans les méthodes d’objets et de classes qui font référence à this, ainsi que dans les constructeurs, utilisez function. Dans les callbacks courts, surtout ceux qui doivent utiliser le this de la méthode dans laquelle ils sont imbriqués (par ex. dans map() ou addEventListener()), utilisez une flèche.
Syntaxe
#function name(param1, param2) {
return value
}
const name = (param1, param2) => valuePlus d’exemples
#const game = {
title: 'Expédition spatiale',
players: ['Léa', 'Lucas'],
announceWithArrow: function () {
return this.players.map((player) => `${this.title}: ${player}`)
},
announceWithFunction: function () {
return this.players.map(function (player) {
return `${this.title}: ${player}`
})
}
}
console.log(game.announceWithArrow())
try {
console.log(game.announceWithFunction())
} catch (error) {
console.log(error.name)
}La flèche dans map() prend le this de la méthode announceWithArrow(). Une fonction ordinaire transmise à map() reçoit son propre this, qui vaut undefined sans récepteur, donc this.title lève une erreur.
function Player(name) {
this.name = name
}
const ArrowPlayer = (name) => {
this.name = name
}
const player = new Player('Léa')
console.log(player.name)
try {
new ArrowPlayer('Lucas')
} catch (error) {
console.log(error.name)
}Bonnes pratiques
#- Écrivez les méthodes d’objets et de classes qui doivent connaître leur
thisavecfunctionou le raccourcimethod() {}, pas avec une flèche. - Dans un callback qui doit utiliser le
thisde la méthode englobante (par ex. à l’intérieur demap()dans une méthode de classe), utilisez une flèche. Une fonction ordinaire recevrait son proprethis, différent. - Vous devez appeler une fonction avant l’endroit où elle est écrite dans le fichier ? Déclarez-la avec
function, ne l’assignez pas àconstcomme une flèche.
Entrées associées
#- functionDéclare une fonction nommée : un bloc de code avec des paramètres, que vous pouvez appeler autant de fois que vous voulez et qui peut renvoyer un résultat.
- () => {}Fonction fléchée (arrow function) : une syntaxe de fonction plus courte, sans this propre, avec un return implicite pour une seule expression.
- returnTermine l’exécution d’une fonction et transmet une valeur à l’endroit où la fonction a été appelée.
- classDéfinit une classe, c’est-à-dire un modèle pour créer des objets avec les mêmes champs et méthodes.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.