Les fonctions fléchées (arrow functions) ont été introduites avec ES6 (ES2015), c'est aujourd'hui la fonctionnalités de ES6 la plus utilisé, c'est dire combien elle a apporté aux développeurs Javascript.
Dans ce tutoriel, nous allons découvrir comment marche les fonctions fléchées, quand et ou les utiliser, mais aussi comment se comporte le mot clé this dans une fonction fléchée. Mais avant c'est quoi une fonction fléchée?
Fonctions fléchées, kezako?
Les fonctions fléchées pour faire simple sont une manière beaucoup plus concise et courte de définir des fonctions en Javascript. Leur particularité c'est qu'on utilise une flèche => pour définir une fonction et on n'utilise plus le mot clé function.
Les fonctions fléchées peuvent tenir sur une ligne, c'est un peu comme les fonctions lambda dans les autres langages comme le Python et le Java.
Définir une fonction fléchée
Pour définir une fonction comme on l'a dit on utilise une flèche =>, c'est une combinaison = et du >:
(parametres) => { instructions }C'est tout ceux dont nous avons besoin, nous avons les paramètres de la fonction dans les parenthèses à gauche, puis les instructions à droite entre {}.
Voyons comment définir concrètement des fonctions fléchées, nous allons mettre les deux définitions ensemble pour que vous puissiez voir la différence.
Une fonction avec plusieurs paramètres:
// ES5
const add = function(x, y) {
return x + y
}
console.log(add(5, 4)) // 9
// ES6
const addES6 = (x, y) => { return x + y }
console.log(addES6(5, 6)) // 11Si vous regardez la définition de la fonction addES6, nous l'avons en une seule ligne et c'est hyper simple. Nous avons donc le même résultat en moins de ligne.
Les accolades ne sont même pas obligatoire ici et le mot clé return aussi, parce que l'on renvoie une seule instruction. Les fonctions fléchées permettent ce qu'on appelle implicit return (retour implicite), c'est à dire pas besoin du mot clé return dans le cas ou nous n'avons qu'une seule instruction comme ici par exemple, on peut donc écrire notre fonction comme ça:
const addES6 = (x, y) => x + yOn aura pas plus simple, plus concis et plus cool.
Une fonction avec un seul paramètre:
// ES5
const hello = function(name) {
return `Hello ${name}`
}
console.log(hello('Diallo')) // Hello Diallo
// ES6
const helloES6 = name => `Hello ${name}`
console.log(helloES6('Niang')) // Hello NiangQuand on a un seul paramètre, nous n'avons donc pas besoin des parenthèses, on renseigne juste le nom du paramètre et c'est bon.
Une fonction sans paramètre:
// ES5
const helloWorld = function() {
return 'Hello World!'
}
console.log(helloWorld()) // Hello World!
// ES6
const helloWorldES6 = () => 'Hello ES6 World!'
console.log(helloWorldES6()) // Hello ES6 World!Pour définir une fonction sans paramètre, on met juste des parenthèses vides.
Fonctions qui renvoient un littérale d'objets:
const setContent = function(title, content) {
return {
title: title,
content: content
}
}
console.log(setContent('Hello', 'World!'))
const setContentES6 = (title, content) => ({title: title, content: content})
console.log(setContentES6('Hello', 'ES6'))Pour retourner un objet, il y a une petite différence, parce que l'objet doit être dans des accolades, il faut donc mettre le return entre parenthèses cette fois-ci pour faire la différence, et nous avons le même type de retour, un objet.
Cas d'utilisation
L'une des utilisations des fonctions fléchées est la manipulation de tableau. Disons par exemple que nous avons un tableau d'entier et que nous voulons filtrer ce tableau et retourner les entiers supérieur a 10.
const prices = [4, 5, 14, 20, 45, 3, 8, 15]
var greaterThan10 = prices.filter(function(p) {
return p > 10
})
console.log(greaterThan10) // [14, 20, 45, 15]
const greaterThan10ES6 = prices.filter(p => p >= 10)
console.log(greaterThan10ES6) // [14, 20, 45, 15]C'est extraordinaire j'avoue, plus simple et plus concis.
Le mot clé this
Les fonctions fléchées ne lient pas leurs propres this mais héritent de la portée parente, appelée "portée lexicale". Prenons un exemple:
const user = {
firstName: 'Adama',
lastName: 'Niang',
old: 25,
presentation: () => `Hi, I'm ${this.firstName} ${this.lastName} and I'm ${this.old} years old.`
}
console.log(user.presentation()) // Hi, I'm undefined undefined and I'm undefined years old.Qu'est ce qui s'est passé? Dans la fonction fléchée, le this représente la portée globale ici pas l'objet user, cela peut bien être l'objet window, donc nous obtenons des undefined.
Essayons donc avec une fonction ordinaire:
const user = {
firstName: 'Adama',
lastName: 'Niang',
old: 25,
presentation: function() {
return `Hi, I'm ${this.firstName} ${this.lastName} and I'm ${this.old} years old.`
}
}
console.log(user.presentation()) // Hi, I'm Adama Niang and I'm 25 years old.Nous avons ici l'affichage voulu. N'utilisez donc pas les fonctions fléchées dans les méthodes de classes, surtout si vous voulez le mot clé this.
N'utilisez pas les fonctions fléchées aussi pour créer des constructeurs, sinon vous aurez de belles erreurs TypeError.
C'est fini pour ce tutoriel, si tu as des questions ou des problèmes, n'hésite pas, rends toi dans la section commentaire ci-dessous et explique nous ton problème.
Tu as aimé ce tutoriel? Partage le avec tes proches dans la section ci-dessous. Sinon dis moi ce que tu n'a pas aimé, j'accepte les critiques :-)
Participe à la discussion