logo

TechCodeview

Fonctions fléchées en JavaScript

Qu'est-ce que la fonction flèche ?

Fonction flèche {()=>} est une manière concise d’écrire des fonctions JavaScript de manière plus courte. Fonctions fléchées ont été introduits dans la version ES6. Ils rendent notre code plus structuré et plus lisible.

Fonctions fléchées sont des fonctions anonymes, c'est-à-dire des fonctions sans nom mais elles sont souvent affectées à n'importe quelle variable. On les appelle aussi Fonctions Lambda .



Syntaxe: 

const gfg = () =>{ console.log( 'Salut Geek !' ); }>

Les exemples ci-dessous montrent le fonctionnement des fonctions Arrow en JavaScript.

Fonction flèche sans paramètres

Javascript 
const gfg = () =>{ console.log( 'Bonjour de GeekforGeeks !' ); } gfg();>
Sortir 
Hi from GeekforGeeks!>

Fonction flèche avec paramètres

Javascript 
const gfg = ( x, y, z ) =>{ console.log( x + y + z ) } gfg( 10, 20, 30 );>
Sortir 
60>

Fonction de flèche avec paramètres par défaut

Javascript 
const gfg = ( x, y, z = 30 ) =>{ console.log( x + ' ' + y + ' ' + z); } gfg( 10, 20 );>
Sortir 
10 20 30>

Les fonctions fléchées peuvent être asynchrones en préfixant l'expression avec le mot-clé async.

async param =>expression async (param1, param2, ...paramN) => { instructions }>

Avantages des fonctions fléchées

  • Les fonctions fléchées réduisent la taille du code.
  • L'instruction return et les crochets de fonction sont facultatifs pour les fonctions sur une seule ligne.
  • Cela augmente la lisibilité du code.
  • Les fonctions fléchées fournissent une liaison lexicale. Cela signifie qu'ils héritent de la valeur de this de la portée englobante. Cette fonctionnalité peut être avantageuse lorsqu'il s'agit d'écouteurs d'événements ou de fonctions de rappel dont la valeur peut être incertaine.

Limites des fonctions fléchées

  • Les fonctions fléchées n'ont pas la propriété prototype.
  • Les fonctions fléchées ne peuvent pas être utilisées avec le nouveau mot-clé.
  • Les fonctions fléchées ne peuvent pas être utilisées comme constructeurs.
  • Ces fonctions sont anonymes et il est difficile de déboguer le code.
  • Les fonctions fléchées ne peuvent pas être utilisées comme fonctions génératrices utilisant le mot clé rendement pour renvoyer plusieurs valeurs au fil du temps.

Navigateurs pris en charge

  • Chrome 45 et supérieur
  • Bord 12 et supérieur
  • Firefox 22 et supérieur
  • Opéra 32 et supérieur
  • Safari 10 et supérieur