Quelles sont les fonctions de flèche en javascript

L'une des meilleures fonctionnalités que le JavaScript moderne nous a fourni est le fonction de flèche indiqué à travers «=>". Aussi connu sous le nom "flèche grasse"Livré divers avantages en programmation. Il est livré avec «cette» contrainte et l'utiliser rend le code plus organisé et plus court.

Ces fonctions sont la raison pour laquelle les fonctions flèches sont strictement préférées aux autres types de déclaration de fonction. Mais avec ces avantages, certains inconvénients.

Dans cet article, nous apprendrons à écrire des fonctions à l'aide de fonctions flèches en javascript et à convertir vos fonctions simples en fonctions flèches. Mais avant de sauter là-dedans, comprenons quelques concepts de base sur les fonctions de flèche en javascript.

Fonctions flèches en javascript

ES6 nous a fourni l'une des fonctionnalités les plus importantes et les plus utiles qui est une fonction flèche qui aide à la déclaration de fonctions de manière plus simple et réduit les lignes de code. La fonction de syntaxe de la flèche est mentionnée ci-dessous:

Syntaxe:

Soit functionName = (p1, p2,… pn) =>
déclaration (s)

Ici,

• functionname: Le nom de la fonction
• P1, P2,… . pn: Ce sont les paramètres des fonctions
• déclaration (s): Les lignes du code JavaScript à l'intérieur du corps de la fonction.

En utilisant ceux-ci, nous pouvons convertir notre code complexe en une version plus précise et compacte. Voici quelques-unes des fonctionnalités qu'il fournit:

Retour implicite

Grâce à cela, l'utilisation de tout type de parenthèses, de fonctions ou des mots clés de retour deviennent facultatifs, permettant le retour implicite. Voici un exemple:

// fonction de flèche
exemple.onClick = (x, y, z) => ceci.faire quelque chose()
// équivalent à une fonction simple
exemple.onClick = fonction (x, y, z)
retourner ceci.faire quelque chose();
.lier (this);

Grâce à l'utilisation des fonctions flèches, il ne permet que une seule expression et le renvoyant implicitement.

"Cette" contrainte : Il lie automatiquement le mot-clé «ceci» au code entouré de fonctions flèches. Par exemple:

var x = this;
exemple.onClick = function ()
X.faire quelque chose();
;

pour

exemple.onClick = () => ceci.faire quelque chose()

De plus, il fournit une version plus courte, plus simple et plus compacte de votre code.

Comment utiliser les fonctions flèches en javascript

En JavaScript, nous pouvons utiliser des fonctions flèches avec des paramètres simples, multiples ou même sans. Ils sont utiles pour une action de ligne, rétrécissant le code de plusieurs lignes dans moins de lignes et donc la sauvegarde de l'espace. Comprenons cela avec l'exemple:

Fonction de flèche JavaScript sans paramètres

La syntaxe suivante est utilisée lorsque la fonction de flèche fonctionne avec zéro paramètres.

Syntaxe:

() => instruction (s)

Ici, la déclaration est le corps de la fonction contenant des lignes de code.

Exemple:

LET PRINT = () => Console.log ("bonjour");
imprimer();

Dans l'exemple ci-dessus, nous imprimons simplement «bonjour» en utilisant la fonction flèche. Comme vous pouvez le voir, les fonctions de flèche n'ont pas de nom, donc ils sont également connus sous le nom de fonctions anonymes. En fin de compte, nous ne pouvons pas les appeler ou les réutiliser à nouveau en cas de besoin car ils n'ont pas de nom, mais si nous devons appeler ou réutiliser les fonctions de flèche, nous devons les affecter à une variable et les appeler en utilisant ce nom de variable.

Ici, nous l'avons attribué à la variable «imprimer» et appelé la variable dans la deuxième ligne.

Sortir:

Fonction de flèche javascript avec un seul paramètre

En cas de paramètre unique, la syntaxe suivante est utilisée:

Syntaxe:

(p) => instruction (s)

Ou, vous pouvez supprimer les parenthèses et la réécrire comme:

p => instruction (s)

Ici, l'instruction est le corps de la fonction contenant des lignes de code et p Le paramètre est-il passé.

Exemple:
Dans cet exemple, la fonction Arrow est utilisée comme un argument de la méthode map () qui convertit un tableau de chaîne en un tableau contenant la longueur d'une chaîne:

Let Days = [«lundi», «mardi», «mercredi»];
Soit longueurs = jours.Carte (jours => jours.longueur);
console.journal (longueurs);

Sortir:

Fonction de flèche JavaScript avec plusieurs paramètres

La syntaxe suivante est utilisée lors de la réussite de deux ou plusieurs paramètres:

Syntaxe:

(p1, p2,…, pn) => instruction;

Ici, l'instruction est le corps de la fonction contenant des lignes de code et p Le paramètre est-il passé. En cela, l'instruction «=>» équivaut à:

=> return instruction;

Dans l'exemple ci-dessous, une méthode tri () est utilisée sans utiliser la fonction Arrow, pour trier les nombres dans l'ordre descendant:

Soit num = [3,1,5];
nobs.tri (fonction (a, b)
retour b - a;
);
console.log (num);

Cela peut être transformé en une fonction flèche

Soit num = [3,1,5];
nobs.tri ((a, b) => b - a);
console.log (num);

Dans l'exemple ci-dessus, la fonction a une seule expression «b-a», donc il renvoie simplement le résultat de l'expression. Mais en cas de syntaxe de blocs, vous devez mentionner le mot-clé de retour.

Sortir:

De cette façon, nous pouvons transformer n'importe quelle fonction en une fonction flèche. Mais, deux points doivent être gardés à l'esprit tout en travaillant avec les fonctions Arrow:

• La fonction flèche ne doit pas être utilisée pour la création de méthodes à l'intérieur d'objets
• Les fonctions de flèche ne peuvent pas être utilisées comme constructeur.

Conclusion

Les fonctions de flèche sont le moyen le plus simple de déclarer toute fonction et il réduit les lignes de codes, sans affecter la fonctionnalité du code. Dans cet article, nous avons appris que les fonctions Arrow sont extrêmement utiles, comment ils convertissent une syntaxe complexe et une longue ligne de code en code plus compact et plus simple. De plus, il n'est pas nécessaire de nommer une fonction flèche à moins que vous n'ayez appelé ou réutilisé la fonction.

Au début, les fonctions de la flèche peuvent sembler difficiles mais avec le temps que vous comprenez le concept, ils deviennent plus faciles et pratiques à mettre en œuvre. Par conséquent, la conversion de votre code en moins de lignes avec une logique plus simple.