
Les fonctions fléchées en JavaScript
En Javascript, il est possible d’écrire des fonctions avec 4 syntaxes différentes. On trouve :
- l’instruction function
function myFunction (arg1, ..., argN) {
...
}
- Les expressions de fonction
const myFunction = function(arg1, ..., argN) {
...
}
- L’opérateur new
new Function (arg1, ..., argN) {
...
}
- Les fonctions fléchées
(arg1, ..., argN) => {
...
}
Les fonctions fléchées (malgré que ce soit des fonctions comme les autres) ont un contexte d’exécution et un fonctionnement un peu différent. C’est ce que nous allons voir dans la suite de cet article.
Les syntaxes de la fonction fléchée en Javascript
Les fonctions fléchées peuvent s’écrire de différentes manières en fonction de la tâche qu’elles ont à réaliser.
La syntaxe de base se présente comme le schéma décrit ci-dessous.
(param1, ..., paramsN) => {
instructions
}
Mais il est possible de simplifier son écriture. Dans le cas où notre fonction ne possède qu’un seul paramètre, on peut retirer les parenthèses et simplifier tel que :
x => {
x = x + 1
return x
}
Et on peut encore simplifier cette écriture. Lorsqu’une fonction fléchée ne possède qu’une seule instruction avec la valeur que l’on souhaite renvoyer :
x => x + 1
En revanche, cette écriture ne peut pas fonctionner si l’on souhaite retourner un objet, car on ne pourrait pas faire de différence avec les {}
de la fonction. On pourra donc écrire :
(x) => ({ a: x + 1 })
Le mot clé this
Une autre différence importante dans la fonction fléchée est le comportement du this. Selon le type de déclaration utilisée, le mot clé this
n’est pas défini de la même manière (nouvel objet dans le cas d’un constructeur, undefined
en mode strict …).
La fonction fléchée ne crée pas de nouveau contexte et utilisera donc le this
du contexte parent.
Dans l’exemple ci-dessous, le this
dans la fonction fléchée moveForward
hérite du contexte de la fonction parente. On a donc bien this.speed
= 2.
function move () {
this.speed = 1;
const moveForward = () => {
this.speed += 1;
console.log(this.speed); //2
}
moveForward()
}
new move()
Si l’on écrivait la même chose avec l’instruction fonction, on aurait une erreur nous informant que la variable speed
n’est pas définie.
function move () {
this.speed = 1;
const moveForward = function() {
this.speed += 1; //error: Uncaught TypeError: Cannot read properties of undefined (reading 'speed')
console.log(this.speed);
}
moveForward()
}
new move()
On peut donc conclure que le this
d’une fonction fléchée dépend de l’objet qui l’appel.
Le mot clé arguments
Comme on l’a vu dans la partie précédente, une fonction fléchée ne possède pas de contexte, mais hérite du contexte de l’objet parent.
Le mot clé arguments
subi le même comportement que this
.
À travers l’exemple ci-dessous, on observe alors que le mot clé arguments
contient les paramètres de la fonction parente.
function move (a, b) {
const moveForward = (c) => {
console.log(arguments) // { 0: "arg1", 1: "arg2" }
}
moveForward("arg3")
}
new move("arg1", "arg2")
Cas d’usages
//---------------
const data = [10, 35, 6, 69, 83, 24, 59, 2, 71, 9, 27, 61]
console.log(data.filter(item => item > 30)) // [35, 69, 83, 59, 71, 61]
//---------------
promise.then(response => {
...
}).catch(error => {
...
})
//---------------
const hasLegalAge = age => age >= 18
//---------------
Les fonctions fléchées n’ont plus de secret pour vous. Maintenant que vous connaissez toutes leurs particularités, vous pouvez l’utiliser à travers votre code.
/!\ Les fonctions fléchées ne sont pas compatibles avec IE