Fonctions fléchées en

À propos de Fonctions fléchées

Outre les déclarations de fonction et les expressions de fonction, JavaScript dispose aussi d'une autre syntaxe très concise pour définir une fonction. Ces fonctions sont appelées fonctions fléchées.

Dans ce concept, on va s'intéresser à la syntaxe utilisée pour écrire une fonction fléchée. Une fonction fléchée ne fonctionne pas tout à fait de la même manière, notamment pour la liaison de this, ce qui sera abordé dans d'autres concepts.

Voici une comparaison entre une déclaration de fonction et une fonction fléchée.

function addUpTwoNumbers(num1, num2) {
  return num1 + num2;
}

// function keyword removed and => added
const addUpTwoNumbers = (num1, num2) => {
  return num1 + num2;
};

Ci-dessus, on constate que la syntaxe de la fonction fléchée :

1. supprime le mot-clé function
2. déclare l'identifiant addUpTwoNumbers avec const
3. ajoute une flèche épaisse =>

Si le corps de la fonction ne contient qu'une instruction return, comme dans l'exemple ci-dessus, on peut omettre les accolades {} et le mot-clé return.

const addUpTwoNumbers = (num1, num2) => { return num1 + num2 };

// can be shortened to
const addUpTwoNumbers = (num1, num2) => num1 + num2;
// braces {} and return removed

Dans le cas particulier où une fonction fléchée ne renvoie qu'un objet, il faut des parenthèses autour de l'objet pour pouvoir omettre l'instruction return.

// explicit return of object
const addUpTwoNumbers = (num1, num2) => {
  return { num1, num2 };
};

// implicit return of object
const addUpTwoNumbers = (num1, num2) => ({ num1, num2 });

L'usage des parenthèses autour des paramètres dépend du nombre de paramètres.

// one parameter does not need parenthesis
const square = num => num * num;

// two or more parameters need to be wrapped in parenthesis
const addUpTwoNumbers = (num1, num2) => num1 + num2;

D'autres concepts, comme les paramètres du reste et la déstructuration, peuvent aussi être utilisés avec une fonction fléchée.