Les fonctions de flèche JavaScript peuvent faire de vous un meilleur développeur

Publicité

JavaScript ES6 a apporté des changements passionnants au monde du développement Web. De nouveaux ajouts au langage JavaScript ont apporté de nouvelles possibilités.

L'un des changements les plus populaires a été l'ajout de fonctions fléchées dans JavaScript. Les fonctions fléchées sont une nouvelle façon d'écrire des expressions de fonction JavaScript, vous offrant deux façons différentes de créer des fonctions dans votre application.

Les fonctions fléchées nécessitent un peu d'ajustement si vous êtes un expert des fonctions JavaScript traditionnelles. Voyons ce qu’elles sont, comment elles fonctionnent et comment elles vous profitent.

Que sont les fonctions flèches JavaScript?

Les fonctions fléchées sont une nouvelle façon d'écrire des expressions de fonction qui étaient inclus dans la version de JavaScript ES6 Qu'est-ce que ES6 et ce que les programmeurs Javascript doivent savoirES6 fait référence à la version 6 du langage de programmation ECMA Script (Javascript). Voyons maintenant quelques changements majeurs qu'ES6 apporte à JavaScript. Lire la suite

. Elles sont similaires aux expressions de fonction JavaScript que vous avez utilisées, avec des règles légèrement différentes.

Les fonctions fléchées sont toujours des fonctions anonymes, ont des règles différentes pour cetteet ont une syntaxe plus simple que les fonctions traditionnelles.

Ces fonctions utilisent un nouveau jeton flèche:

=>

Si vous avez déjà travaillé en Python, ces fonctions sont très similaires à Expressions Lambda Python Guide du débutant pour comprendre les fonctions Python LambdaLes lambdas en Python sont l'une des fonctionnalités les plus utiles, importantes et intéressantes à connaître. Voici comment les utiliser et pourquoi ils sont utiles. Lire la suite .

La syntaxe de ces fonctions est un peu plus propre que les fonctions normales. Il y a quelques nouvelles règles à garder à l'esprit:

• Le mot clé function est supprimé
• Le mot-clé return est facultatif
• Les accolades sont facultatives

Il y a beaucoup de petits changements à passer, 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. La compréhension des fonctions fléchées est plus facile à comparer côte à côte avec les expressions de fonction traditionnelles.

Voici une expression de fonction qui ajoute deux nombres; en utilisant d'abord la méthode de fonction traditionnelle:

 laissez addnum = fonction (num1, num2) {return num1 + num2; }; addnum (1,2); >>3

C’est une fonction assez simple qui prend deux arguments et renvoie la somme.

Voici l'expression changée en fonction de flèche:

laissez addnum = (num1, num2) => {return num1 + num2;}; addnum (1,2); >>3

La syntaxe de la fonction est très différente en utilisant une fonction flèche. Le mot clé function est supprimé; le jeton flèche indique à JavaScript que vous écrivez une fonction.

Les accolades et le mot-clé return sont toujours là. Celles-ci sont facultatives avec des fonctions fléchées. Voici un exemple encore plus simple de la même fonction:

laissez addnum = (num1, num2) => num1 + num2;

Le mot-clé de retour et les accolades sont maintenant partis. Ce qui reste est une fonction d'une ligne très propre qui représente près de la moitié du code comme la fonction d'origine. Vous obtenez le même résultat avec beaucoup moins de code écrit.

Il y a plus de fonctions fléchées. approfondissons pour mieux comprendre ce qu'ils peuvent faire.

Caractéristiques de la fonction flèche

Les fonctions fléchées ont de nombreuses utilisations et fonctionnalités différentes.

Fonctions régulières

Les fonctions fléchées peuvent utiliser un ou plusieurs arguments. Si vous utilisez deux arguments ou plus, vous devez les mettre entre parenthèses. Si vous n'avez qu'un seul argument, 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 argument. Si vous n'utilisez aucun argument dans votre fonction, vous devez utiliser des parenthèses vides.

laissez helloFunction = () => Console.log ("Bonjour lecteur!"); helloFunction (); >> Bonjour lecteur!

Des fonctions simples comme celles-ci utilisent beaucoup moins de code. Imaginez combien un complexe est plus facile projeter comme un diaporama JavaScript Comment créer un diaporama JavaScript en 3 étapes facilesAujourd'hui, je vais vous montrer comment créer un diaporama Javacript à partir de zéro - allons-y! Lire la suite devient lorsque vous avez un moyen plus simple d'écrire des fonctions.

Utiliser ceci

Le concept de cette tend à être la partie la plus délicate de l'utilisation de JavaScript. Les fonctions fléchées font 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 qui surviennent lorsque vous créez des fonctions imbriquées et que vous avez besoin cette à appliquer à votre fonction principale

Voici un exemple populaire qui montre la solution de contournement que vous devez utiliser avec les fonctions normales.

fonction Person () {var that = this; // Vous devez assigner 'this' à une nouvelle variable that.age = 0; setInterval (function growUp () {that.age ++; }, 1000); }

Attribution de la valeur de cette à une variable la rend lisible lorsque vous appelez une fonction à l'intérieur de votre fonction principale. C'est désordonné, voici une meilleure façon de le faire en utilisant les fonctions fléchées.

fonction Person () {this.age = 0; setInterval (() => {this.age ++; // Vous pouvez maintenant utiliser 'this' sans nouvelle variable déclarée}, 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'un objet. Les fonctions fléchées n'utilisent pas la bonne portée pour cette.

Voici un objet simple qui crée une méthode à l'intérieur à l'aide d'une fonction de flèche. La méthode devrait réduire la garnitures variable par un lorsqu'il est appelé. Au lieu de cela, cela ne fonctionne pas du tout.

laissez pizza = { garnitures: 5, removeToppings: () => {this.toppings--; } } // Un objet à pizza avec 5 garnitures. > pizza. >> {garnitures: 5, removeToppings: f} pizza.removeToppings (); // La méthode ne fera rien à l'objet> pizza. >> {toppings: 5, removeToppings: f} // A encore 5 toppings.

Utilisation de tableaux

À l'aide des fonctions fléchées, vous pouvez simplifier le code utilisé pour travailler avec les méthodes de tableau. Tableaux et les méthodes de tableau sont des parties très importantes de JavaScript 5 méthodes de tableau JavaScript que vous devez maîtriser aujourd'huiVous voulez comprendre les tableaux JavaScript mais vous ne pouvez pas les maîtriser? Consultez nos exemples de tableaux JavaScript pour obtenir des conseils. Lire la suite vous les utiliserez donc beaucoup.

Il existe des méthodes utiles comme le carte méthode qui exécute une fonction sur tous les éléments d'un tableau et renvoie le nouveau tableau.

laissez myArray = [1,2,3,4]; myArray.map (fonction (élément) { élément de retour + 1; }); >> [2,3,4,5]

Il s'agit d'une fonction assez simple qui ajoute une à chaque valeur du tableau. Vous pouvez écrire la même fonction avec moins de code en utilisant une fonction de flèche.

laissez myArray = [1,2,3,4]; myArray.map (element => { élément de retour + 1; }); >> [2,3,4,5]

C'est beaucoup plus facile à lire maintenant.

Création de littéraux d'objets

Les fonctions fléchées peuvent être utilisées pour créer des littéraux d'objets en JavaScript. Les fonctions normales peuvent les créer, mais elles sont un peu plus longues.

laissez createObject = function createName (first, last) {return {first: first, last: last}; };

Vous pouvez créer le même objet avec une fonction de flèche en utilisant moins de code. En utilisant la notation fléchée, vous devrez encapsuler le corps de la fonction entre parenthèses. Voici la syntaxe améliorée avec les fonctions fléchées.

laissez createArrowObject = (premier, dernier) => ({premier: premier, dernier: dernier});

Fonctions flèches JavaScript et au-delà

Vous connaissez maintenant différentes manières dont les fonctions des flèches JavaScript vous facilitent la vie en tant que développeur. Ils raccourcissent la syntaxe, vous donnent plus de contrôle en utilisant cette, facilite la création d'objets et vous offre une nouvelle façon de travailler avec les méthodes de tableau.

L'introduction des fonctions fléchées, ainsi que de nombreuses autres fonctionnalités, dans JavaScript ES6 montre à quel point JavaScript est devenu important dans le développement Web. Vous pouvez cependant faire bien plus.

Vous voulez en savoir plus sur JavaScript? Notre Aide-mémoire JavaScript La feuille de triche ultime JavaScriptObtenez une mise à jour rapide sur les éléments JavaScript avec cette feuille de triche. Lire la suite fournit des informations précieuses et en savoir plus sur comment JavaScript fonctionne Qu'est-ce que JavaScript et comment fonctionne-t-il?Si vous apprenez le développement Web, voici ce que vous devez savoir sur JavaScript et comment il fonctionne avec HTML et CSS. Lire la suite peut faire de vous un meilleur développeur.