Utilisation des fonctions fléchées dans JavaScript –

Une fonction de flèche en JavaScript est une alternative plus simple à une fonction traditionnelle. La syntaxe permet la création rapide de fonctions anonymes en ligne.

Les fonctions de flèche ont été ajoutées avec ES6 en 2015. Elles sont désormais prises en charge par tous les principaux navigateurs. Vous pouvez les utiliser avec des navigateurs plus anciens, comme Internet Explorer, via un transpilateur comme Babel.

Création de fonctions fléchées

Le principal avantage des fonctions fléchées est la concision de leur code.

Voici une fonction traditionnelle:

function square(x) {
    return (x * x);
}

Voici le même code réécrit en fonction de flèche:

const square = x => (x * x);

Elles sont appelées « fonctions fléchées » en raison de la forme d’une flèche « =>»Syntaxe.

Les fonctions fléchées sont particulièrement utiles lorsque vous travaillez avec des rappels.

Voici la version traditionnelle:

function getNonEmptyStrings(arr) {
    return arr.filter(function (i) {
        return (i.length > 0);
    });
}

Et voici la fonction interne en tant que fonction de flèche:

function getNonEmptyStrings(arr) {
    return arr.filter(i => (i.length > 0));
}

Les fonctions de flèche sont beaucoup plus courtes que leurs homologues traditionnels. Vous pouvez omettre le function préfixe. Ils permettent des instructions sur une ligne propres et ont un implicite return déclaration.

Gestion des arguments

Les fonctions fléchées acceptent différentes formes d’arguments:

const noArgs = () => alert("I've no arguments");
 
const oneArg = arg => alert(`My arg is ${arg}`);
 
const multipleArgs = (arg1, arg2) => alert(`Args: ${arg1} ${arg2}`);

Lors de l’utilisation d’un seul argument, aucune parenthèse n’est nécessaire. Lorsqu’il y a plusieurs arguments, utilisez des parenthèses et des virgules dans le même style qu’une déclaration de fonction classique. Les fonctions fléchées qui n’acceptent aucun argument nécessitent une paire de parenthèses vides pour que la syntaxe soit valide.

Utilisation de littéraux d’objet

Vous pouvez renvoyer des littéraux d’objet à partir des fonctions fléchées en ligne, mais ils doivent être placés entre parenthèses. C’est une exigence de l’analyseur.

const func = () => ({foo: "bar"});

Vous pouvez déstructurer un littéral d’objet en arguments en utilisant la même forme entre parenthèses:

const func = ({foo}) => foo;
// func({foo: "bar"}) returns "bar"

L’omission des parenthèses crée une erreur de syntaxe dans les deux cas.

Valeurs renvoyées

Jusqu’à présent, tous nos exemples étaient des fonctions sur une seule ligne avec un return déclaration.

Vous pouvez écrire des fonctions fléchées qui s’étendent sur plusieurs lignes:

function getNonEmptyStrings(arr) {
    return arr.filter(i => {
        const trimmed = i.trim();
        const replaced = trimmed.replace(/[^A-Za-z]/g, "");
        return (replaced.length > 0);
    });
}

Lorsque vous écrivez une fonction de flèche multiligne, placez son bloc de corps entre crochets de la même manière que vous le feriez pour une fonction traditionnelle. Il n’est pas possible d’utiliser un retour implicite; vous devez revenir à un return déclaration.

Reliure lexicale

Outre la syntaxe, la présence de reliure lexicale est l’une des plus grandes différences entre les fonctions fléchées et les expressions de fonctions classiques.

Une fonction traditionnelle a this lié à se référer à lui-même. Les fonctions fléchées sont toujours anonymes. this est lié à la même valeur que le this dans le bloc définissant la fonction de flèche.

class Example {
 
    constructor() {
        this.demo = "foobar";
    }
 
    classic(arr) {
        return arr.filter(function (a) {
            return (a === this.demo);
        });
    }
 
    arrow(arr) {
        return arr.filter(a => (a === this.demo));
    }
 
}
 
const ex = new Example();
 
// no matches
ex.classic(["foobar"]);
 
// matches
ex.arrow(["foobar"]);

La capacité des fonctions fléchées à utiliser this de la portée parent signifie que vous n’avez pas besoin d’utiliser bind() lors de leur utilisation dans les classes. Combiné avec la syntaxe terser, cela fait des fonctions fléchées la forme idéale lors de l’écriture de rappels. Ils sont les meilleurs dans les scénarios jetables où le contexte extérieur est plus important que la propre identité de la fonction.

En raison de la liaison lexicale, les fonctions fléchées ne doivent pas être utilisées avec le call, apply et bind les fonctions. Ces fonctions sont utilisées pour exécuter une fonction dans une portée spécifique. Ils ne sont pas pertinents pour les fonctions fléchées car this sera toujours défini sur la portée dans laquelle l’expression est définie.

Caractéristiques

Les fonctions fléchées présentent quelques autres différences par rapport aux fonctions définies explicitement function expressions.

Les fonctions fléchées n’ont pas constructor vous ne pouvez donc pas en créer des instances avec new mot-clé. Ils n’ont pas non plus de prototype – le prototype la propriété sera undefined.

Contrairement aux fonctions normales, vous ne pouvez pas utiliser arguments variable locale. Ce sera undefined. Vous devez accéder aux valeurs des arguments directement par leur nom.

L’utilisation d’une fonction de flèche comme générateur n’est pas prise en charge. Essayer d’utiliser le yield Le mot-clé dans le corps d’une fonction fléchée générera une erreur.

Une dernière chose à surveiller est l’ordre d’analyse. Les fonctions de flèche reçoivent un traitement unique dans les expressions conditionnelles, alors prenez note de la sortie dans les scénarios suivants:

const value = false;
 
// Traditional function; all OK
let result = (value || function () {});
 
// Arrow function - throws a `SyntaxError`
let result = (value || () => null);
 
// Arrow function; all OK
let result = (value || (() => null));

Lorsque vous créez une fonction de flèche dans une expression conditionnelle, placez-la entre parenthèses pour vous assurer qu’elle est correctement évaluée. Certaines des règles de priorité des opérateurs sont remplacées, comme illustré par le deuxième exemple.

Conclusion

L’utilisation des fonctions fléchées rend votre code plus concis et réduit le passe-partout. Leurs attributs, y compris l’anonymat et la liaison lexicale, simplifient considérablement les scénarios tels que les rappels. Simultanément, ces mêmes attributs signifient qu’ils ne remplacent pas toutes les fonctions traditionnelles.

Outre leurs limitations, certains développeurs JavaScript considèrent que les fonctions fléchées peuvent rendre le code moins lisible et plus délicat à maintenir. L’absence totale de mots-clés, tels que function et return, permet d’ignorer leur présence lors du survol du code. La syntaxe est plus opaque pour les nouveaux développeurs qui peuvent ne pas être pleinement conscients de ses particularités.

C’est donc une bonne idée de réfléchir à la manière dont vous utiliserez les fonctions fléchées dans votre base de code. Souvent, cela signifie écrire des rappels sous forme de flèche tout en conservant une syntaxe alternative pour les fonctions clés de niveau supérieur.