Les fonctions fléchées en javascript

Syntaxe, fonctionnement, cas d'usages ... Les fonctions fléchées n'auront plus de secret pour vous !

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ès que ce soit des fonctions comme les autres) ont un contexte d'éxé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 nest 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'appelle

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.

A travers l'exemple ci-dessous, on observe donc 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 ses particularités, vous pouvez l'utiliser à travers votre code.

/!\ Les fonctions fléchées ne sont pas compatible avec IE

Apprenez à programmer avec des exemples simples et concrets.

English / Français