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

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

JavaScript ES6 a apporté des changements passionnants au monde du développement Web. Les 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 que c'est, comment ils fonctionnent et comment ils vous profitent.





Que sont les fonctions de flèche 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 . 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



this

, et ont une syntaxe plus simple que les fonctions traditionnelles.

applications qui n'ont pas besoin d'internet

Ces fonctions utilisent un nouveau jeton de flèche :



=>

Si vous avez déjà travaillé en Python, ces fonctions sont très similaires à Expressions Python Lambda .

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



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

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. La compréhension des fonctions fléchées est plus facile lorsqu'elle est comparée aux expressions de fonction traditionnelles.

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

let addnum = function(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 :

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

La syntaxe de la fonction est assez différente en utilisant une fonction flèche. Le mot-clé de fonction est supprimé ; le jeton flèche permet à JavaScript de savoir que vous écrivez une fonction.

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

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

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

Il y a plus aux fonctions de flèche. plongeons plus profondément pour que vous ayez une meilleure idée de ce qu'ils peuvent faire.

Fonctionnalités de la fonction flèche

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

comment arrêter la lecture automatique dans firefox

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.

let square = x => x * x
square(2);
>>4

Les fonctions fléchées peuvent être utilisées sans arguments. Si vous n'utilisez aucun argument dans votre fonction, vous devez utiliser des parenthèses vides.

let helloFunction = () => Console.log('Hello reader!');
helloFunction();
>>Hello reader!

Des fonctions simples comme celles-ci utilisent beaucoup moins de code. Imaginez combien plus facile un complexe projeter comme un diaporama JavaScript devient lorsque vous avez un moyen plus simple d'écrire des fonctions.

Utiliser ceci

La notion de

this

a tendance à être la partie la plus délicate de l'utilisation de JavaScript. Les fonctions fléchées font

this

plus facile à utiliser.

Lorsque vous utilisez les fonctions fléchées

this

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

this

à appliquer à votre fonction principale

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

function Person() {
var that = this; //You have to assign 'this' to a new variable
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}

Attribuer la valeur de

this

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

function Person(){
this.age = 0;
setInterval(() => {
this.age++; // Now you can use 'this' without a new variable declared
}, 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

this

.

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

on vous a refusé l'autorisation d'accéder à ce dossier
let pizza = {
toppings: 5,
removeToppings: () => {
this.toppings--;
}
}
//A pizza object with 5 toppings
>pizza
>>{toppings: 5, removeToppings: f}
pizza.removeToppings(); //The method will not do anything to the object
>pizza
>>{toppings: 5, removeToppings: f} //Still has 5 toppings

Travailler avec des tableaux

En utilisant les 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 vous les utiliserez donc beaucoup.

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

let myArray = [1,2,3,4];
myArray.map(function(element){
return element + 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 flèche.

let myArray = [1,2,3,4];
myArray.map(element => {
return element + 1;
});
>> [2,3,4,5]

C'est beaucoup plus facile à lire maintenant.

Création de 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 un peu plus longues.

let 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 placer le corps de la fonction entre parenthèses. Voici la syntaxe améliorée avec les fonctions fléchées.

let createArrowObject = (first,last) => ({first:first, last:last});

Fonctions de flèche JavaScript et au-delà

Vous connaissez maintenant différentes façons dont les fonctions de flèche JavaScript vous facilitent la vie en tant que développeur. Ils raccourcissent la syntaxe, vous donnent plus de contrôle en utilisant

this

, facilitent la création d'objets et vous offrent une nouvelle façon de travailler avec les méthodes de tableau.

L'introduction de 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. Il y a tellement plus que vous pouvez faire cependant.

Vous voulez en savoir plus sur JavaScript ? Apprenez ces frameworks JavaScript. De plus, notre Aide-mémoire JavaScript fournit des informations précieuses et en savoir plus sur comment fonctionne JavaScript peut faire de vous un meilleur développeur.

Partager Partager Tweeter E-mail 6 alternatives audibles : les meilleures applications de livres audio gratuites ou bon marché

Si vous n'avez pas envie de payer pour des livres audio, voici quelques excellentes applications qui vous permettent de les écouter gratuitement et légalement.

Lire la suite Rubriques connexes
  • La programmation
  • JavaScript
A propos de l'auteur Antoine Grant(40 articles publiés)

Anthony Grant est un écrivain indépendant couvrant la programmation et les logiciels. C'est un étudiant en informatique spécialisé dans la programmation, Excel, les logiciels et la technologie.

Plus de Anthony Grant

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner