Les fonctions de flèche JavaScript peuvent faire de vous un meilleur développeur
JavaScript ES6 apporte des changements passionnants au monde du développement Web. De nouveaux ajouts au langage JavaScript ouvrent de nouvelles possibilités.
L’un des changements les plus populaires a été l’ajout de fonctions fléchées à JavaScript. Les fonctions fléchées sont une nouvelle façon d’écrire des expressions de fonction JavaScript qui vous offrent deux façons différentes de créer des fonctions dans votre application.
Si vous êtes un expert des fonctions JavaScript traditionnelles, les fonctions fléchées nécessitent quelques ajustements. Jetons un coup d’œil à ce qu’ils sont, comment ils fonctionnent et comment ils peuvent vous être utiles.
Qu’est-ce qu’une fonction de flèche JavaScript ?
Les fonctions fléchées sont une nouvelle façon d’écrire des expressions de fonction, et elles ont été incluses dans la version de JavaScript ES6. Elles sont similaires aux expressions de fonction JavaScript que vous avez utilisées, mais avec des règles légèrement différentes.
Les fonctions fléchées sont toujours anonymes, avec des règles différentes
cette
et a une syntaxe plus simple que les fonctions traditionnelles.
Ces fonctions sont signalées par de nouvelles flèches :
=>
Si vous avez déjà utilisé Python, ces fonctions sont très similaires aux expressions Python lambda.
La syntaxe de ces fonctions est un peu plus concise que les fonctions normales. Il y a quelques nouvelles règles à garder à l’esprit :
- Mot clé de fonctionnalité supprimé
- Le mot-clé return est facultatif
- Les accolades sont facultatives
Faire une vidéo du jour
Il y a beaucoup de petits changements à passer en revue, alors commençons par une comparaison de base des expressions de fonction.
Comment utiliser les fonctions fléchées
Les fonctions fléchées sont faciles à utiliser. Les fonctions fléchées sont plus faciles à comprendre lorsque vous les comparez côte à côte avec des expressions de fonction traditionnelles.
Voici une expression de fonction qui additionne deux nombres ; d’abord en utilisant l’approche fonctionnelle traditionnelle :
let addnum = fonction(num1, num2) {
renvoie le numéro 1 + le numéro 2 ;
} ;
addend(1,2);
>>3
C’est une fonction très simple qui prend deux arguments et renvoie la somme.
Voici l’expression changée en fonction fléchée :
let addnum = (num1,num2) => { return num1 + num2;};
addend(1,2);
>>3
La syntaxe de fonction pour l’utilisation des fonctions fléchées est complètement différente. Le mot-clé function est supprimé ; la flèche permet à JavaScript de savoir que vous écrivez une fonction.
Les accolades et le mot clé return existent toujours. Ce sont des fonctions fléchées facultatives. Voici un exemple plus simple de la même fonction :
soit addnum = (num1,num2) => num1 + num2 ;
Le mot-clé return et les accolades ont disparu maintenant. Ce qui reste est une fonction d’une ligne très propre avec presque la moitié du code de la fonction d’origine. Vous pouvez obtenir le même résultat avec moins de code d’écriture.
Il y a plus dans les fonctions fléchées. Examinons de plus près afin que vous puissiez mieux comprendre ce qu’ils peuvent faire.
Caractéristiques des flèches
Les fonctions fléchées ont de nombreuses utilisations et propriétés différentes.
fonction régulière
Les fonctions fléchées peuvent prendre un ou plusieurs paramètres. Si vous utilisez deux paramètres ou plus, vous devez les mettre entre parenthèses. Si vous n’avez qu’un seul paramètre, vous n’avez pas besoin d’utiliser de parenthèses.
soit carré = x => x * x
carré(2);
>>4
Les fonctions fléchées peuvent être utilisées sans paramètres. Si vous n’utilisez aucun paramètre dans la fonction, vous devez utiliser des parenthèses vides.
let helloFunction = () => Console.log(« Bonjour lecteur! »);
bonjour fonction();
>> Bonjour lecteurs !
Des fonctions simples comme celle-ci utilisent beaucoup moins de code. Imaginez à quel point un projet complexe comme un diaporama JavaScript serait plus simple si vous disposiez d’un moyen plus simple d’écrire des fonctions.
utilisez ceci
la notion de
cette
Souvent la partie la plus délicate du travail avec JavaScript.la fonction flèche fait
cette
Plus facile à utiliser.
lorsque vous utilisez les fonctions fléchées
cette
sera défini par la fonction englobante.Cela peut créer des problèmes lorsque vous créez des fonctions imbriquées et avez besoin
cette
Postulez à votre fonction principale
Voici un exemple populaire qui montre une solution de contournement où vous devez utiliser des fonctions régulières.
fonction personne() {
var ça = ça;
cet âge = 0 ;
setInterval (fonction croître () {
cet.âge++ ;
}, 1000);
}
attribuer
cette
La variable la rend lisible lorsque vous appelez la fonction dans la fonction principale. C’est désordonné, voici une meilleure façon de le faire avec les fonctions fléchées.
fonction personne() {
this.age = 0 ;
setInterval(() => {
this.age++;
}, 1000);
}
Bien qu’ils soient parfaits pour les fonctions, ils ne doivent pas être utilisés pour créer des méthodes à l’intérieur d’objets.Les fonctions fléchées n’utilisent pas la portée correcte
cette
.
Il s’agit d’un objet simple qui utilise des fonctions fléchées pour créer des méthodes en interne.Cette méthode devrait réduire garnitures La variable est incrémentée de un lorsqu’elle est appelée. Au lieu de cela, cela ne fonctionne pas du tout.
laisser pizza = {
Garnitures : 5,
supprimerToppings : () => {
this.toppings– ;
}
}
> Pizzas
>>{garnitures : 5, supprimer les garnitures : f}
Pizza.removeToppings();
> Pizzas
>>{garnitures : 5, supprimer les garnitures : f}
utiliser un tableau
À l’aide des fonctions fléchées, vous pouvez simplifier le code de gestion des méthodes de tableau. Les tableaux et les méthodes de tableau sont une partie très importante de JavaScript, vous les utiliserez donc beaucoup.
Il existe des méthodes utiles comme carte Une méthode qui exécute une fonction sur tous les éléments d’un tableau et renvoie un nouveau tableau.
laissez monTableau = [1,2,3,4];
myArray.map(fonction(élément){
élément de retour + 1 ;
});
>> [2,3,4,5]
Il s’agit d’une fonction très simple qui ajoute un à chaque valeur du tableau. Vous pouvez utiliser les fonctions fléchées pour écrire la même fonction avec moins de code.
laissez monTableau = [1,2,3,4];
monTableau.map(element => {
élément de retour + 1 ;
});
>> [2,3,4,5]
C’est beaucoup plus facile à lire maintenant.
Créer des littéraux d’objet
Les fonctions fléchées peuvent être utilisées pour créer des littéraux d’objet en JavaScript. Les fonctions régulières peuvent les créer, mais elles sont plus longues.
let createObject = function createName(first,last) {
retourner {
premier: premier,
dernier : dernier
} ;
} ;
Vous pouvez créer le même objet en utilisant des fonctions fléchées avec moins de code. Avec la notation fléchée, vous devez envelopper le corps de la fonction entre parenthèses. Il s’agit d’une syntaxe améliorée avec des fonctions fléchées.
let createArrowObject = (first,last) => ({first:first, last:last});
Fonctions fléchées JavaScript et plus
Vous connaissez maintenant certaines des différentes façons dont les fonctions de flèche JavaScript vous facilitent la vie en tant que développeur.Ils raccourcissent la syntaxe et vous donnent plus de contrôle sur votre utilisation
cette
facilite la création d’objets et vous offre une nouvelle façon d’utiliser les méthodes de tableau.
L’introduction des fonctions fléchées dans JavaScript ES6 ainsi que de nombreuses autres fonctionnalités montre l’importance de JavaScript dans le développement Web. Cependant, vous pouvez faire beaucoup plus.
Vous voulez en savoir plus sur JavaScript ? Découvrez ces frameworks JavaScript. De plus, notre feuille de triche JavaScript fournit des informations précieuses, et en savoir plus sur le fonctionnement de JavaScript peut faire de vous un meilleur développeur.
A propos de l’auteur
