Syntaxe Fat et Concise en JavaScript

Les fonctions de flèche ont été introduites avec ES6 comme nouvelle syntaxe pour écrire des fonctions JavaScript. Ils font gagner du temps aux développeurs et simplifient la portée des fonctions. Les sondages montrent qu'ils sont la fonction ES6 la plus populaire:

Source: Enquête Axel Rauschmayer sur les caractéristiques ES6 préférées

Source: Enquête de Ponyfoo sur les fonctionnalités ES6 les plus couramment utilisées

La bonne nouvelle est que de nombreux navigateurs modernes soutiennent l'utilisation de fonctions de flèches . post traitera des détails des fonctions flèches – comment les utiliser, des syntaxes communes, des cas d'utilisation courants et des pièges / pièges.

Quelles sont les fonctions fléchées?

Les fonctions fléchées – également appelées "grosse flèche" de CoffeeScript ( un langage transcompilé ) – sont une syntaxe plus concise pour écrire des expressions de fonction. Ils utilisent un nouveau jeton, => qui ressemble à une grosse flèche. Les fonctions fléchées sont anonymes et modifient la façon dont ce se lie dans les fonctions

Les fonctions Flèche rendent notre code plus concis et simplifient la portée de la fonction et le mot-clé . Ils sont des mini-fonctions d'une ligne qui fonctionnent un peu comme Lambdas dans d'autres langues comme C # ou Python . (Voir aussi lambdas en JavaScript ). En utilisant les fonctions de flèches, nous évitons d'avoir à taper le mot-clé return (implicite dans les fonctions de flèches) et les accolades.

Utiliser les fonctions fléchées

sont une variété de syntaxes disponibles dans les fonctions de flèche, dont MDN a une liste complète . Nous couvrirons les communes ici pour vous aider à démarrer. Comparons comment le code ES5 avec les expressions de fonction peut maintenant être écrit en ES6 en utilisant les fonctions fléchées

Syntaxe de base avec plusieurs paramètres ( from MDN )

 // (param1, param2, paramN) => expression

// ES5
var multiplierES5 = fonction (x, y) {
  renvoie x * y;
}

// ES6
const multiplplyES6 = (x, y) => {return x * y};

Exemple de code à JSBin .

L'exemple de fonction de flèche ci-dessus permet à un développeur d'obtenir le même résultat avec moins de lignes de code et environ la moitié de la dactylographie

l'expression est présente. L'exemple précédent pourrait aussi s'écrire:

 const multiplyES6 = (x, y) => x * y;

Syntaxe de base avec un seul paramètre

Les parenthèses sont facultatives lorsqu'un seul paramètre est présent

 // ES5
var phraseSplitterEs5 = function phraseSplitter (phrase) {
  return phrase.split ('');
}

// ES6
const phraseSplitterEs6 = phrase => phrase.split ("");

console.log (phraseSplitterEs6 ("ES6 Awesomeness")); // ["ES6", "Awesomeness"]

Exemple de code à JSBin .

Pas de paramètres

Les parenthèses sont obligatoires quand aucun paramètre n'est présent.

 // ES5
var docLogEs5 = fonction docLog () {
    console.log (document);
}

// ES6
var docLogEs6 = () => {console.log (document); }
docLogEs6 (); // #document ...  ....

Exemple de code à JSBin .

Syntaxe littérale d'objet

Les fonctions de flèche, comme les expressions de fonction, peuvent être utilisées pour renvoyer une expression littérale d'objet. Le seul inconvénient est que le corps doit être enveloppé entre parenthèses, afin de distinguer entre un bloc et un objet (les deux utilisent des accolades).

 // ES5
var setNameIdsEs5 = function setNameIds (id, nom) {
  revenir {
    J'ai fait,
    nom nom
  }
}

// ES6
var setNameIdsEs6 = (id, nom) => ({id: id, nom: nom});

console.log (setNameIdsEs6 (4, "Kyle")); // Objet {id: 4, nom: "Kyle"}

Exemple de code à JSBin

Cas d'utilisation pour les fonctions de flèche

Maintenant que nous avons couvert les syntaxes de base, passons à la façon dont les fonctions de flèches sont utilisées.

fonctions est la manipulation de tableau et similaire. Il est courant que vous deviez mapper ou réduire un tableau. Prenez ce tableau simple d'objets:

 const smartPhones = [
  { name:'iphone', price:649 },
  { name:'Galaxy S6', price:576 },
  { name:'Galaxy Note 5', price:489 }
];

Nous pourrions créer un tableau d'objets avec juste les noms ou les prix en faisant cela dans ES5:

 // ES5
var prices = smartPhones.map (fonction (smartPhone) {
  return smartPhone.price;
});

console.log (prix); // [649, 576, 489]

Une fonction de flèche est plus concise et plus facile à lire:

 // ES6
prix const = smartPhones.map (smartPhone => smartPhone.price);
console.log (prix); // [649, 576, 489]

Exemple de code à JSBin .

Voici un autre exemple utilisant la méthode de filtre de tableau :

 const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

// ES5
var divisibleByThrreeES5 = array.filter (fonction (v) {
  return v% 3 === 0;
});

// ES6
const divisibleByThrreeES6 = array.filter (v => v% 3 === 0);

console.log (divisibleByThrreeES6); // [3, 6, 9, 12, 15]

Exemple de code à JSBin .

Promesses et rappels

Le code qui utilise des rappels asynchrones ou des promesses contient souvent beaucoup de fonction et retour mots-clés Lorsque vous utilisez des promesses, ces expressions de fonction seront utilisées pour le chaînage. Voici un exemple simple de promesses de chaînage à partir des documents MSDN :

 // ES5
aAsync (). then (function () {
  returnbAsync ();
}). then (function () {
  returncAsync ();
}). done (function () {
  terminer();
});

Ce code est simplifié, et sans doute plus facile à lire en utilisant les fonctions fléchées:

 // ES6
aAsync (). then (() => bAsync ()). then (() => cAsync ()). done (() => finish);

Les fonctions de flèche devraient également simplifier le code NodeJS chargé de rappel

Quelle est la signification de ceci?

L'autre avantage de l'utilisation des fonctions de flèches avec promesses / rappels est que cela réduit la confusion entourant le mot-clé . Dans le code avec plusieurs fonctions imbriquées, il peut être difficile de garder une trace et de se souvenir de lier le contexte correct. Dans ES5, vous pouvez utiliser des solutions de contournement comme la méthode .bind ( qui est lente ) ou créer une fermeture à l'aide de var self = this; . Les fonctions de flèche vous permettent de conserver la portée de l'appelant dans la fonction, vous n'avez pas besoin de créer self = this fermetures ou utiliser bind.

Développeur Jack Franklin fournit un excellent exemple pratique d'utilisation de la fonction flèche lexical this pour simplifier une promesse :

Sans fonctions Arrow, le code de promesse doit être écrit quelque chose comme ceci:

 // ES5
API.prototype.get = function (ressource) {
  var self = ceci;
  return new Promise (fonction (résoudre, rejeter) {
    http.get (self.uri + resource, function (data) {
      résoudre (données);
    });
  });
}

En utilisant une fonction de flèche, le même résultat peut être atteint de manière plus concise et plus claire:

 // ES6
API.prototype.get = function (ressource) {
  return new Promise ((résoudre, rejeter) => {
    http.get (this.uri + resource, function (data) {
      résoudre (données);
    });
  });
}

Vous pouvez utiliser des expressions de fonction si vous avez besoin d'une fonction dynamique et d'une flèche pour un lexique

Gotcha et pièges des fonctions de flèche

Apportez une syntaxe de fonction utile à ECMAScript, mais comme pour toute nouvelle fonctionnalité, ils ont leurs propres pièges et pièges.

Kyle Simpson, un développeur et rédacteur JavaScript, a estimé qu'il y avait assez d'embûches avec les fonctions de flèches pour justifier cela. organigramme au moment de décider de les utiliser . Il soutient qu'il y a trop de règles / syntaxes déroutantes avec des fonctions de flèches. D'autres ont suggéré que l'utilisation des fonctions flèches permet d'économiser la frappe, mais rend finalement le code plus difficile à lire. Toutes ces fonctions et déclarations de retour pourraient faciliter la lecture de plusieurs fonctions imbriquées ou simplement des expressions de fonction en général

Les opinions des développeurs varient sur à peu près tout, y compris les fonctions fléchées. Par souci de brièveté, voici quelques choses dont vous devez faire attention lorsque vous utilisez les fonctions de flèches.

Plus sur this

Comme mentionné précédemment, le this mot-clé fonctionne différemment dans les fonctions de flèche. Les méthodes appel (), apply () et bind () ne changeront pas la valeur de cette dans les fonctions de flèche. (En fait, la valeur de ce à l'intérieur d'une fonction ne peut tout simplement pas être changée, elle sera la même que lorsque la fonction a été appelée.) Si vous avez besoin de lier à une valeur différente, ll faut utiliser une expression de fonction

Constructeurs

Les fonctions de flèches ne peuvent pas être utilisées comme constructeurs comme d'autres fonctions le peuvent. Ne les utilisez pas pour créer des objets similaires à ceux d'autres fonctions. Si vous essayez d'utiliser new avec une fonction fléchée, une erreur sera générée. Les fonctions Flèche, comme les fonctions intégrées (méthodes aka), n'ont pas de propriété prototype ou d'autres méthodes internes. Comme les constructeurs sont généralement utilisés pour créer des objets de type classe en JavaScript, vous devez utiliser les nouvelles classes ES6 .

Générateurs

Les fonctions de flèche sont conçues pour être légères et ne peuvent pas être utilisées comme générateurs . L'utilisation du mot-clé yield dans ES6 génère une erreur. Utilisez Générateurs ES6 à la place.

Arguments object

Les fonctions de flèche n'ont pas les arguments de la variable locale comme d'autres fonctions. L'objet arguments est un objet de type tableau qui permet aux développeurs de découvrir dynamiquement et d'accéder aux arguments d'une fonction. Ceci est utile car les fonctions JavaScript peuvent prendre un nombre illimité d'arguments. Les fonctions de flèche n'ont pas cet objet

Combien d'utilisation est-ce que les fonctions de flèche?

Les fonctions de flèche ont été appelées l'une des victoires les plus rapides avec ES6. Développeur Lars Schöning expose comment son équipe a décidé où utiliser les fonctions fléchées :

• Utiliser la fonction dans la portée globale et pour Object.prototype propriétés Utilisez la classe pour les constructeurs d'objets
• Utilisez => partout ailleurs.

Fonctions de flèche, comme let et const deviendront probablement les fonctions par défaut à moins que des expressions de fonction ou des déclarations ne soient nécessaires. Kevin Smith a compté des expressions de fonctions dans diverses bibliothèques / frameworks populaires et a trouvé qu'en gros 55% des expressions de fonction seraient des candidats pour les fonctions de flèches.

Les fonctions de flèches sont ici: elles sont puissantes, concises et les développeurs les adorent.

Plus de travail sur le développement Web

Cet article fait partie de la série de développement web de Microsoft et DevelopIntelligence sur l'apprentissage JavaScript pratique, open-source projets, et les meilleures pratiques d'interopérabilité, y compris le navigateur Microsoft Edge et le nouveau moteur de rendu EdgeHTML . DevelopIntelligence offre une formation JavaScript dirigée par un instructeur AngularJS Training et d'autres Web Development Training pour des équipes techniques et des organisations.

Nous encourageons vous tester sur les navigateurs et les périphériques, y compris Microsoft Edge - le navigateur par défaut pour Windows 10 - avec des outils gratuits sur dev.microsoftedge.com :

Apprentissage plus approfondi de nos ingénieurs et évangélistes: [19659007] Nos projets open source de la communauté:

Plus d'outils gratuits et de matériel de développement web back-end:

Cet article fait partie d'une série de développement web de Microsoft. Merci d'appuyer les partenaires qui rendent SitePoint possible.

Pour une introduction approfondie et de haute qualité à l'ES6, vous ne pouvez pas passer devant le développeur canadien de full-stack Wes Bos. Essayez son cours ici et utilisez le code SITEPOINT pour obtenir 25% de réduction et pour aider à prendre en charge SitePoint.

Kyle est un instructeur technique chez DevelopIntelligence . Il passe son temps à lire, coder, faire du vélo et explorer la musique live à Denver. Il aime essayer de rendre les concepts techniques plus accessibles et aime bricoler avec les API de musique et de cartographie.