Fonction de flèche JavaScript

Dans ce didacticiel, vous découvrirez la fonction de flèche JavaScript à l'aide d'exemples.

La fonction Flèche est l'une des fonctionnalités introduites dans la version ES6 de JavaScript. Il vous permet de créer des fonctions de manière plus propre par rapport aux fonctions régulières. Par exemple,
cette fonction

 // function expression let x = function(x, y) ( return x * y; )

peut être écrit comme

 // using arrow functions let x = (x, y) => x * y;

en utilisant une fonction fléchée.

Syntaxe de la fonction de flèche

La syntaxe de la fonction flèche est:

 let myFunction = (arg1, arg2,… argN) => ( statement(s) )

Ici,

  • myFunction est le nom de la fonction
  • arg1, arg2,… argN sont les arguments de la fonction
  • statement(s) est le corps de la fonction

Si le corps a une seule instruction ou expression, vous pouvez écrire la fonction de flèche comme:

 let myFunction = (arg1, arg2,… argN) => expression

Exemple 1: fonction de flèche sans argument

Si une fonction ne prend aucun argument, vous devez utiliser des parenthèses vides. Par exemple,

 let greet = () => console.log('Hello'); greet(); // Hello

Exemple 2: fonction de flèche avec un argument

Si une fonction n'a qu'un seul argument, vous pouvez omettre les parenthèses. Par exemple,

 let greet = x => console.log(x); greet('Hello'); // Hello

Exemple 3: fonction de flèche en tant qu'expression

Vous pouvez également créer dynamiquement une fonction et l'utiliser comme expression. Par exemple,

 let age = 5; let welcome = (age console.log('Baby') : () => console.log('Adult'); welcome(); // Baby

Exemple 4: Fonctions de flèches multilignes

Si un corps de fonction a plusieurs instructions, vous devez les mettre entre accolades (). Par exemple,

 let sum = (a, b) => ( let result = a + b; return result; ) let result1 = sum(5,7); console.log(result1); // 12

ceci avec la fonction de flèche

À l'intérieur d'une fonction régulière, ce mot-clé fait référence à la fonction où il est appelé.

Cependant, thisn'est pas associé aux fonctions fléchées. La fonction de flèche n'a pas la sienne this. Ainsi, chaque fois que vous appelez this, il fait référence à sa portée parente. Par exemple,

À l'intérieur d'une fonction régulière

 function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( // this is accessible console.log(this.age); function innerFunc() ( // this refers to the global object console.log(this.age); console.log(this); ) innerFunc(); ) ) let x = new Person(); x.sayName();

Production

 25 fenêtre non définie ()

Ici, l' this.ageintérieur this.sayName()est accessible car this.sayName()c'est la méthode d'un objet.

Cependant, innerFunc()est une fonction normale et this.agen'est pas accessible car thisfait référence à l'objet global (objet Window dans le navigateur). Par conséquent, this.ageà l'intérieur de la innerFunc()fonction donne undefined.

À l'intérieur d'une fonction de flèche

 function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( console.log(this.age); let innerFunc = () => ( console.log(this.age); ) innerFunc(); ) ) const x = new Person(); x.sayName();

Production

 25 25

Ici, la innerFunc()fonction est définie à l'aide de la fonction flèche. Et à l'intérieur de la fonction de flèche, thisfait référence à la portée du parent. Par conséquent, this.agedonne 25 .

Arguments de liaison

Les fonctions régulières ont une liaison d'arguments. C'est pourquoi lorsque vous passez des arguments à une fonction normale, vous pouvez y accéder à l'aide du argumentsmot - clé. Par exemple,

 let x = function () ( console.log(arguments); ) x(4,6,7); // Arguments (4, 6, 7)

Les fonctions fléchées n'ont pas de liaison d'arguments.

Lorsque vous essayez d'accéder à un argument à l'aide de la fonction de flèche, cela donnera une erreur. Par exemple,

 let x = () => ( console.log(arguments); ) x(4,6,7); // ReferenceError: Can't find variable: arguments

Pour résoudre ce problème, vous pouvez utiliser la syntaxe de diffusion. Par exemple,

 let x = (… n) => ( console.log(n); ) x(4,6,7); // (4, 6, 7)

Fonction de flèche avec promesses et rappels

Les fonctions fléchées fournissent une meilleure syntaxe pour écrire des promesses et des rappels. Par exemple,

 // ES5 asyncFunction().then(function() ( return asyncFunction1(); )).then(function() ( return asyncFunction2(); )).then(function() ( finish; ));

peut être écrit comme

 // ES6 asyncFunction() .then(() => asyncFunction1()) .then(() => asyncFunction2()) .then(() => finish);

Ce que vous devez éviter avec les fonctions fléchées

1. Vous ne devez pas utiliser les fonctions fléchées pour créer des méthodes à l'intérieur des objets.

 let person = ( name: 'Jack', age: 25, sayName: () => ( // this refers to the global… // console.log(this.age); ) ) person.sayName(); // undefined

2. Vous ne pouvez pas utiliser une fonction de flèche comme constructeur . Par exemple,

 let Foo = () => (); let foo = new Foo(); // TypeError: Foo is not a constructor

Remarque : les fonctions de flèche ont été introduites dans ES6 . Certains navigateurs peuvent ne pas prendre en charge l'utilisation des fonctions fléchées. Visitez le support de la fonction de flèche JavaScript pour en savoir plus.

Articles intéressants...