Javascript Arrow function
Un jour à partir de 2015 à peu près en parcourant du script js, vous êtes sûrement tombés sur du code ressemblant à ça : var u = () => elm.text(Date.now()) …
C’est l’une des nouveautés de ECMAScript 2015, il s’agit des arrow functions ou encore lambda functions (bien connu d’autres langages tels que C#).
La syntaxe fonction fléchée en javascript, AKA arrow function, existe depuis l’arrivée de ECMAScript 2015 (ES6).
Elle permet principalement d’alléger considérablement le code des fonctions et de partger le context this.
Avantages
- Simplification syntaxe du code
- Pas de nouveau contexe
this - Retour implicite (lambda functions)
Syntaxe
// Cas général
([param] [, param]) => {
instructions
}
// Un seul param et une seul instruction
param => expression
Remarques
- Parenthèses non nécessaires quand il n’y a qu’un seul argument
- Accolades non nécessaires quand il n’y a qu’une seul instruction
Exemples
- Sans la syntaxe arrow function
$('.current-time').each(function () {
var self = this;
setInterval(function () {
$(self).text(Date.now());
}, 1000);
});
- Avec la syntaxe arrow function
$('.current-time').each(function () {
setInterval(() => this.text(Date.now()), 1000);
});
Un dernier exemple pour la route …
var a = ["A", "AB", "ABC"];
// Sans la syntaxe des fonctions fléchées
var a2 = a.map(function(s){ return s.length });
// Avec, on a quelque chose de plus concis
var a3 = a.map( s => s.length )
Maintenant que vous avez compris l’intérêt une arrow funuction vous pouvez maintenant épater la gallerie avec votre code !
