() => {}
Fonction fléchée (arrow function) : une syntaxe de fonction plus courte, sans this propre, avec un return implicite pour une seule expression.
Exemple
#const add = (a, b) => a + b
const greet = (name) => `Salut, ${name} !`
const getDefaults = () => ({ level: 1, points: 0 })
console.log(add(2, 3))
console.log(greet('Emma'))
console.log(getDefaults())Définition et utilisation
#Une fonction fléchée est une écriture compacte d’une expression de fonction. Au lieu du mot function, vous écrivez les paramètres, une flèche => et le corps de la fonction. Elle est idéale comme callback court dans map(), filter() ou addEventListener().
Si le corps est une seule expression, vous pouvez omettre les accolades et return : le résultat de l’expression est renvoyé automatiquement. Avec un seul paramètre, les parenthèses autour de lui sont optionnelles. Pour renvoyer un objet dans l’écriture courte, entourez-le de parenthèses : () => ({ ok: true }).
Les flèches n’ont pas leur propre this ni arguments, elles les prennent du code environnant. Cela facilite l’écriture de callbacks à l’intérieur de méthodes, mais pour la même raison les flèches ne conviennent pas comme méthodes d’objets qui s’appuient sur this. Vous ne pouvez pas non plus les appeler avec new.
Syntaxe
#() => expression
param => expression
(param1, param2) => expression
(param1, param2) => {
// instructions
return value
}
() => ({ key: value })Plus d’exemples
#const students = [
{ name: 'Léa', points: 120 },
{ name: 'Lucas', points: 80 },
{ name: 'Emma', points: 150 }
]
const passed = students
.filter((student) => student.points >= 100)
.map((student) => student.name)
console.log(passed)const course = {
title: 'JavaScript',
lessons: ['Variables', 'Fonctions'],
list() {
return this.lessons.map((lesson) => `${this.title}: ${lesson}`)
}
}
console.log(course.list())La flèche à l’intérieur de map() utilise le this de la méthode list(). Une fonction normale function (lesson) {} aurait son propre this égal à undefined.
const player = {
name: 'Lucas',
arrowHello: () => `Salut, ${this?.name}`,
methodHello() {
return `Salut, ${this.name}`
}
}
console.log(player.arrowHello())
console.log(player.methodHello())La flèche ne reçoit pas l’objet comme this, elle prend le this de son environnement, qui vaut undefined au premier niveau d’un module. Sans ?., cette lecture aurait levé une TypeError. Écrivez les méthodes d’objets avec le raccourci methodHello() {}.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour renvoyer un objet dans l’écriture courte, pensez aux parenthèses :
() => ({ id: 1 }). Sans elles, les accolades sont lues comme le corps de la fonction et vous obtenezundefined. - Utilisez la syntaxe de méthode normale pour les méthodes d’objets et de classes. Gardez les flèches pour les callbacks et les petites fonctions utilitaires.
- Quand le corps s’étend sur plusieurs lignes, ajoutez des accolades et un
returnexplicite. Sans cela, la fonction renvoieundefined.
Entrées associées
#- () => {} vs functionUne 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.
- 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.
- returnTermine l’exécution d’une fonction et transmet une valeur à l’endroit où la fonction a été appelée.
- thisMot-clé qui désigne l’objet sur lequel une fonction a été appelée.
- Array.prototype.map()Crée un nouveau tableau avec les résultats de l’appel d’une fonction pour chaque élément.
- 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.