Fonctions Fléchées en JavaScript
Les Fonctions Fléchées ont été introduites dans ES6 .
Les Fonctions Fléchées permettent une syntaxe plus courte pour les expressions de fonction .
Vous pouvez omettre le mot-clé function , le mot-clé return et les accolades :
let myFunction = (a, b) => a * b; Avant Flèche :
Fonction pour calculer le produit de a et b.
let myFunction = function(a, b) {return a * b}
Avec Flèche
let myFunction = (a, b) => a * b;
Avant Flèche :
let hello = function() {
return "Hello World!";
}
Avec Fonction Fléchée :
let hello = () => {
return "Hello World!";
}
Si la fonction a seulement une instruction qui renvoie une valeur, vous pouvez supprimer les accolades et le mot-clé return :
Les Fonctions Fléchées Renvoient une Valeur par Défaut :
let hello = () => "Hello World!";
Remarque
Cela ne fonctionne que si la fonction a seulement une instruction.
Paramètres de Fonction Fléchée
Si vous avez des paramètres, vous les passez à l'intérieur des parenthèses :
Exemple
let hello = (val) => "Hello " + val;
Si vous avez seulement un paramètre, vous pouvez également omettre les parenthèses :
Remarque
Les fonctions fléchées doivent être définies avant d'être utilisées.
Vous ne pouvez omettre le mot-clé return et les accolades que si la fonction est une seule instruction. Pour cette raison, il peut être judicieux de toujours les garder :
Exemple
// Cela ne fonctionnera pas
let myFunction = (x, y) => { x * y } ;
// Cela ne fonctionnera pas
let myFunction = (x, y) => return x * y ;
// Seul cela fonctionnera
let myFunction = (x, y) => { return x * y };
Support des Navigateurs
= () => {} est une fonctionnalité ES6 .
ES6 est entièrement pris en charge dans tous les navigateurs modernes depuis juin 2017 :
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| Mai 2016 | Avril 2017 | Juin 2017 | Septembre 2016 | Juin 2016 |