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