Que sont les fonctions de flèche JavaScript ?

Dans cet article, vous allez tout apprendre sur les fonctions de flèche JavaScript. Les fonctions fléchées que nous utilisons pour rendre le code plus concis et il existe de nombreuses variantes que vous pouvez écrire.

Javascript est un langage très fonctionnel . Les fonctions en javascript sont l'un des concepts les plus précieux. Nous écrivons des fonctions, nous transmettons des fonctions, des rappels et le code de synchronisation que nous avons des fonctions. C'est juste une partie fondamentale de JavaScript.

Pendant longtemps, nous avons écrit des mots clés de fonction pour écrire une fonction en javascript. Voici quelques exemples de fonctions en JavaScript. Vous pouvez voir que nous utilisons ici un mot-clé de fonction.

(function () {
   //...
});

Une fonction anonyme n'est pas accessible après sa création initiale. Par conséquent, vous devez souvent l'affecter à une variable.

Par exemple, l'exemple suivant montre une fonction anonyme qui affiche un message :

let show = function() {
    console.log('Anonymous function');
};

show();

Comme nous devons appeler la fonction anonyme plus tard, nous affectons la fonction anonyme à la show variable.

Étant donné que l'affectation complète de la fonction anonyme à la variable show constitue une expression valide, vous n'avez pas besoin d'envelopper la fonction anonyme entre parenthèses ().

En pratique, vous passez souvent des fonctions anonymes comme arguments à d'autres fonctions. Par exemple:

setTimeout(function() {
    console.log('Execute later after 1 second')
}, 1000);

Notez que les fonctions sont des citoyens de première classe en JavaScript. Par conséquent, vous pouvez passer une fonction à une autre fonction en tant qu'argument.

Ici, vous pouvez voir chaque fois que nous devons écrire un mot-clé de fonction et définir une fonction. Mais c'est là que la fonction Flèche entre en scène. ES6 a introduit des expressions de fonction fléchée qui fournissent un raccourci pour déclarer des fonctions anonymes. Une expression de fonction fléchée est une alternative compacte à une expression de fonction traditionnelle , avec quelques différences sémantiques et des limitations délibérées d'utilisation.

Normalement, les fonctions Arrow sont plus courtes et parfois elles se comportent différemment par rapport aux fonctions javascript traditionnelles.

Les fonctions fléchées ne sont pas prises en charge pour Internet Explorer .

Nous utilisons les symboles '= et >' lorsque nous définissons une fonction fléchée. Cela ressemble à une flèche, c'est pourquoi nous appelons ces fonctions des fonctions fléchées.

let show = () => console.log('Anonymous function');

Nous pouvons écrire la fonction normale sous la forme d'une fonction fléchée comme celle-ci.

let add = function (a, b) { // Normal Fucntion
    return a + b;
};
let add = (a, b) => a + b;  // Arrow Fucntion

• Si vous avez 2 arguments, vous pouvez utiliser les parenthèses comme une fonction normale :

let add = function (a, b) { // Normal Fucntion
    return a + b;
};



let add = (a, b) => a + b;  // Arrow Fucntion

let square = function(x){ // Normal Fucntion
    return x * x;
}


let square = (x) => { // Arrow fucntion with parenthesis
    return x * x;
}

let square = x => { // You can modify it as like this
    return x * x;
}

let square = x => (  // Furthermore you can modify by removing return keyword
     x * x   // Replace {} with  ()
);

let square = x => x * x; // Furthermore you can modify

let test  = () => console.log('No Arguments');

Pour supprimer ce problème, nous devons le mettre entre parenthèses .

Maintenant, javascript sait qu'il s'agit d'une valeur de retour et qu'il ne s'agit pas simplement d'une accolade pour le corps d'une fonction.

Les fonctions fléchées n'ont pas leurs propres liaisons avec this, argumentsou super, et ne doivent pas être utilisées comme méthodes

• Les expressions de fonction fléchée ne doivent être utilisées que pour les fonctions non-méthodiques car elles n'ont pas leur propre this.

const person ={
    name: "Kasun",
    action: function(){
        console.log(this.name, "says Hi");
    }
}

person.action();

J'appelle l'action sur un objet personne et la valeur du nom reviendra avec la chaîne concaténée. Utilisons maintenant les fonctions fléchées au lieu des fonctions régulières.

const person ={
    name: "Kasun",
    action: () => console.log(this.name, "says Hi")
}

person.action();

Maintenant, nous obtenons simplement « dit bonjour » comme sortie. Que s'est-il passé ici? Lorsque nous utilisons des fonctions fléchées, la valeur du nom n'est pas définie car les fonctions normales fonctionnent. Il est simplement défini sur l'objet window lorsque nous l'utilisons dans les fonctions fléchées. Il se comporte comme la fonction actions est une fonction autonome.

Pour des raisons similaires, les méthodes call(), apply()et bind()ne sont pas utiles lorsqu'elles sont appelées sur des fonctions fléchées, car les fonctions fléchées s'établissent thisen fonction de la portée dans laquelle la fonction fléchée est définie et la thisvaleur ne change pas en fonction de la façon dont la fonction est appelée.

• Les fonctions fléchées ne peuvent pas être utilisées comme constructeurs et génèrent une erreur lorsqu'elles sont appelées avec new. Ils n'ont pas non plus de prototypepropriété.

const Foo = () => {};
const foo = new Foo(); // TypeError: Foo is not a constructor
console.log("prototype" in Foo); // false

Il s'agit des fonctions fléchées et j'espère que vous comprenez parfaitement les fonctions fléchées. A bientôt dans un autre tuto.

Merci!