Fonctions fléchées en JavaScript - Utilisation efficace

Les fonctions sont le coeur de JavaScript. Alors qu'auparavant elles étaient liées à l'utilisation du mot-clé function, ES6 introduit une nouvelle et plus élégante syntaxe avec les fonctions à flèche, appelées ainsi. Cette nouvelle syntaxe rend non seulement ton code plus court, mais résout également certains problèmes liés au contexte this. Dans ce guide, tu apprendras tout ce que tu dois savoir sur les fonctions à flèche.

Principales conclusions

• Les fonctions fléchées offrent une syntaxe plus courte par rapport aux fonctions classiques.
• Elles n'ont pas leur propre contexte this, ce qui les rend particulièrement pratiques pour être utilisées dans les fonctions de rappel (callbacks).
• La suppression des accolades et de l'instruction return est possible lorsque la fonction ne renvoie qu'une seule expression.

Introduction aux fonctions fléchées

Les fonctions fléchées sont généralement utilisées pour rendre le code plus lisible et compact. Au lieu d'écrire function, tu peux utiliser la nouvelle syntaxe pour déclarer la fonction de manière plus concise.

Pour comprendre ce que sont les fonctions fléchées, on peut bien utiliser les fonctions traditionnelles comme point de départ. Lorsque tu déclares une fonction avec le mot-clé function, elle est généralement plus longue et moins élégante. Voici un exemple de fonction standard en JavaScript:

function doIt() { console.log("Doing it");
}

C'est la base sur laquelle nous passerons aux fonctions fléchées.

Étape 1: Déclaration d'une fonction fléchée

Au lieu du mot-clé function, tu peux simplement mettre les paramètres entre parenthèses puis utiliser une flèche suivie du corps de la fonction. Voici à quoi ressemble la fonction précédente en tant que fonction fléchée:

const doIt = () => { console.log("Doing it");
};

Comme tu peux le voir, la syntaxe est beaucoup plus compacte. Après le premier essai, tu peux vérifier si la fonction fonctionne correctement.

Étape 2: Utilisation des fonctions fléchées avec les tableaux

Un autre grand avantage des fonctions fléchées se manifeste lorsqu'elles sont utilisées avec des tableaux. Prenons un exemple. Supposons que tu aies un tableau de nombres et que tu souhaites trouver la position d'un nombre spécifique. Voici comment utiliser la méthode findIndex pour trouver l'index:

const numbers = [2, 3, 4, 5];
const index = numbers.findIndex((element) => element === 3);
console.log(index);

Les fonctions fléchées simplifient énormément la lisibilité du code et réduisent le besoin d'un mot-clé function supplémentaire.

Étape 3: Simplification des fonctions fléchées

Lorsqu'une fonction fléchée n'a qu'une seule expression, tu peux omettre les accolades et le mot-clé return. Voici comment raccourcir davantage la fonction findIndex:

const index = numbers.findIndex(element => element === 3);

C'est non seulement plus court mais aussi plus élégant. Tu peux tester la fonction pour vérifier qu'elle fonctionne toujours correctement.

Étape 4: Gestion du mot-clé this

Un avantage décisif des fonctions fléchées est la manipulation du contexte this. Dans les fonctions classiques, this devient souvent imprévisible, surtout quand la fonction est utilisée en tant que rappel (callback). En revanche, les fonctions fléchées lient this au contexte dans lequel elles ont été définies.

Regarde l'exemple suivant:

const obj = { text: "Text", print: function() { console.log(this.text); }
};

obj.print(); // Affiche "Text"

Cependant, si tu utilises setTimeout avec une fonction classique, le contexte de this change:

setTimeout(function() { console.log(this.text);
}, 1000); // Affiche undefined

En utilisant une fonction fléchée à la place dans setTimeout, tu obtiendras le même résultat qu'avec la fonction classique, sans perdre le contexte:

setTimeout(() => { console.log(this.text);
}, 1000); // Affiche "Text"

Étape 5: Maintien de l'affectation de this

Tu peux également lier this à une variable pour t'assurer d'y avoir accès. Ce schéma est cependant souvent moins élégant que l'utilisation des fonctions fléchées.

const self = this;
setTimeout(function() { console.log(self.text);
}, 1000);

Avantages des fonctions fléchées

• Elles sont plus courtes et plus élégantes par rapport à la déclaration de fonction traditionnelle.
• Elles n'ont pas leur propre contexte this, ce qui facilite leur utilisation dans les fonctions de rappel.
• La syntaxe permet de rendre le code nettement plus lisible.

Résumé

Les fonctions fléchées offrent un moyen pratique de déclarer les fonctions JavaScript de manière efficace. La nouvelle syntaxe améliore non seulement la lisibilité, mais simplifie également considérablement la gestion du contexte this. Vous devriez utiliser les fonctions fléchées surtout lorsque vous avez besoin de fonctions de rappel ou d'expressions de fonction plus courtes.