JavaScript
Fonctions de flèche

Introduction

Syntaxe

• x => y // Retour implicite

• x => {return y} // Retour explicite

• (x, y, z) => {...} // Plusieurs arguments

• async () => {...} // Fonctions de flèche asynchrone

• (() => {...}) () // Expression de la fonction invoquée immédiatement

• const myFunc = x

  => x * 2 // Un saut de ligne avant que la flèche ne lance une erreur "Jeton inattendu"

• const myFunc = x =>

  x * 2 // Un saut de ligne après la flèche est une syntaxe valide

Remarques

introduction

En JavaScript, les fonctions peuvent être définies anonymement à l'aide de la syntaxe "arrow" ( => ), parfois appelée expression lambda en raison des similarités Lisp communes .

La forme la plus simple d'une fonction de flèche a ses arguments du côté gauche de => et la valeur de retour du côté droit:

item => item + 1 // -> function(item){return item + 1}

Cette fonction peut être appelée immédiatement en fournissant un argument à l'expression:

(item => item + 1)(41) // -> 42

Si une fonction de flèche prend un seul paramètre, les parenthèses autour de ce paramètre sont facultatives. Par exemple, les expressions suivantes affectent le même type de fonction aux variables constantes :

const foo = bar => bar + 1;
const bar = (baz) => baz + 1;

Cependant, si la fonction flèche ne prend aucun paramètre, ou plusieurs paramètres, un nouvel ensemble de parenthèses doit englober tous les arguments:

(() => "foo")() // -> "foo"

((bow, arrow) => bow + arrow)('I took an arrow ', 'to the knee...')
// -> "I took an arrow to the knee..."

Si le corps de la fonction ne comprend pas une seule expression, il doit être entouré de parenthèses et utiliser une instruction de return explicite pour obtenir un résultat:

(bar => {
  const baz = 41;
  return bar + baz;
})(1); // -> 42

Si le corps de la fonction de flèche est uniquement constitué d'un littéral d'objet, ce littéral d'objet doit être mis entre parenthèses:

(bar => ({ baz: 1 }))(); // -> Object {baz: 1}

Les parenthèses supplémentaires indiquent que les crochets d’ouverture et de fermeture font partie du littéral de l’objet, c’est-à-dire qu’ils ne sont pas des délimiteurs du corps de la fonction.

Portée et liaison lexicales (valeur de "this")

Les fonctions fléchées ont une portée lexicale ; cela signifie que leur this liaison est liée au contexte de la portée environnante. C'est-à-dire que tout this que this fait référence peut être préservé en utilisant une fonction de flèche.

Regardez l'exemple suivant. La classe Cow a une méthode qui lui permet d’imprimer le son qu’elle fait après 1 seconde.

class Cow {

  constructor() {
    this.sound = "moo";
  }

  makeSoundLater() {
    setTimeout(() => console.log(this.sound), 1000);
  }
}

const betsy = new Cow();

betsy.makeSoundLater();

Dans la méthode makeSoundLater() , le contexte this fait référence à l'instance actuelle de l'objet Cow , donc dans le cas où j'appelle betsy.makeSoundLater() , this contexte fait référence à betsy .

En utilisant la fonction de flèche, je conserve this contexte afin que je puisse faire référence à ce this.sound lorsque vient le temps de l'imprimer, ce qui imprimera correctement "moo".

Si vous aviez utilisé une fonction normale à la place de la fonction de flèche, vous perdriez le contexte de la classe et vous ne pourriez pas accéder directement à la propriété sound .

Objet Arguments

Les fonctions de flèche n'exposent pas un objet argument; par conséquent, les arguments feraient simplement référence à une variable dans la portée actuelle.

const arguments = [true];
const foo = x => console.log(arguments[0]);

foo(false); // -> true

De ce fait, les fonctions fléchées ne sont pas non plus connues de leur appelant / appelé.

Bien que l'absence d'un objet argument puisse être une limitation dans certains cas extrêmes, les paramètres de repos sont généralement une alternative appropriée.

const arguments = [true];
const foo = (...arguments) => console.log(arguments[0]);

foo(false); // -> false

Retour implicite

Les fonctions de flèche peuvent renvoyer implicitement des valeurs en omettant simplement les accolades qui enveloppent traditionnellement le corps d'une fonction si leur corps ne contient qu'une seule expression.

const foo = x => x + 1;
foo(1); // -> 2

Lors de l'utilisation de retours implicites, les littéraux d'objet doivent être mis entre parenthèses afin que les accolades ne soient pas prises pour l'ouverture du corps de la fonction.

const foo = () => { bar: 1 } // foo() returns undefined
const foo = () => ({ bar: 1 }) // foo() returns {bar: 1}

Retour explicite

Les fonctions fléchées peuvent se comporter de manière très similaire aux fonctions classiques en ce sens que vous pouvez leur retourner explicitement une valeur en utilisant le mot-clé return ; Enveloppez simplement le corps de votre fonction entre accolades et renvoyez une valeur:

const foo = x => {
  return x + 1;
}

foo(1); // -> 2

Arrow fonctionne comme un constructeur

Les fonctions de flèche lanceront une TypeError lorsqu'utilisée avec le new mot-clé.

const foo = function () {
  return 'foo';
}

const a = new foo();

const bar = () => {
  return 'bar';
}

const b = new bar(); // -> Uncaught TypeError: bar is not a constructor...