- une déclaration de fonction ;
- une expression de fonction ;
- une fonction fléchée ;
- la syntaxe
new Function.
Dans cette leçon, nous allons étudier les spécificités des trois premières méthodes (la dernière est très rarement utilisée) et nous attarder en particulier sur les fonctions fléchées que nous n’avons pas encore étudié durant ce cours.
Les déclaration de fonctions
Jusqu’à présent, nous avons principalement utilisé des déclarations de fonctions. La syntaxe de déclaration de fonction est la suivante :
See the Pen
Cours JavaScript 10.2.1 by Pierre (@pierregiraud)
on CodePen.
Nous connaissons bien cette syntaxe : ici, on déclare une fonction avec le mot clef function, on donne un nom à notre fonction et on fait suivre ce nom par un couple de parenthèses et un couple d’accolades.
Les expressions de fonctions
Pour créer une expression de fonction, nous allons utiliser une syntaxe similaire à celle-ci-dessus à la différence qu’on va cette fois-ci directement assigner notre fonction à une variable dont on choisira le nom.
See the Pen
Cours JavaScript 10.2.2 by Pierre (@pierregiraud)
on CodePen.
Généralement, lorsqu’on crée une fonction de cette manière, on utilise une fonction anonyme qu’on assigne ensuite à une variable. Pour appeler une fonction créée comme cela, on va pouvoir utiliser la variable comme une fonction, c’est-à-dire avec un couple de parenthèses après son nom.
Notez cependant que rien ne nous empêche cependant de donner un nom à notre fonction. Dans ce cas-là, on parlera de « NFE » pour « Named Function Expression » ou « expression de fonction nommée » en français.
Ajouter un nom à une expression de fonction permet à la fonction de faire référence à elle-même en interne en étant sûr de s’appeler. En effet, en utilisant une expression de fonction classique, la variable qui contient l’expression de fonction peut changer de valeur dans le script et rendre notre fonction inutilisable.
See the Pen
Cours JavaScript 10.2.3 by Pierre (@pierregiraud)
on CodePen.
De plus, le nom passé aux NFE n’est pas accessible depuis l’extérieur de la fonction. Cela garantit qu’en l’utilisant dans notre expression de fonction, il fera toujours bien référence à la fonction actuelle.
Déclarations de fonctions vs expressions de fonctions
Dans la grande majorité des cas, il est plus pratique d’utiliser une déclaration de fonction qu’une expression de fonction pour créer une fonction en JavaScript. En effet, lorsqu’on crée des fonctions en utilisant des déclarations de fonctions, celles-ci vont être immédiatement disponibles dans le script ou dans l’espace dans lequel elles ont été créées, ce qui n’est pas le cas pour les expressions de fonctions.
Cela est dû au fait que les déclarations de fonctions sont les premiers éléments recherchés et lus par le JavaScript lorsqu’un script est exécuté. Les expressions de fonctions, au contraire, vont être lues dans l’ordre de leur écriture dans le script.
See the Pen
Cours JavaScript 10.2.4 by Pierre (@pierregiraud)
on CodePen.
Il existe cependant un type d’expression de fonctions qui peut s’avérer parfois pratique : les expressions de fonctions fléchées.
Les expressions de fonctions fléchées : syntaxe et intérêts
Les fonctions fléchées sont des fonctions qui possèdent une syntaxe très compacte, ce qui les rend très rapide à écrire. Les fonctions fléchées utilisent le signe => qui leur a donné leur nom à cause de sa forme de flèche.
Regardons immédiatement la syntaxe de ces fonctions :
See the Pen
Cours JavaScript 10.2.5 by Pierre (@pierregiraud)
on CodePen.
Comme vous pouvez le voir, la syntaxe des fonctions fléchées et très concise et cela est normal puisque ce sont des fonctions qui ont été faites pour être déclarées sur une seule et unique ligne.
Les fonctions fléchées n’ont pas besoin du couple d’accolades classique aux fonctions pour fonctionner et n’ont pas besoin non plus d’une expression return puisque celles-ci vont automatiquement évaluer l’expression à droite du signe => et retourner son résultat.
De plus, notez que si notre fonction fléchée n’a besoin que d’un argument pour fonctionner, alors on pourra également omettre le couple de parenthèses.
See the Pen
Cours JavaScript 10.2.6 by Pierre (@pierregiraud)
on CodePen.
Tout cela est vrai pour des fonctions fléchées déclarées sur une ligne. On va également pouvoir déclarer des fonctions fléchées sur plusieurs lignes, mais nous allons alors perdre beaucoup des avantages offerts par celles-ci en termes de concision du code. En effet, lorsqu’on écrit une fonction fléchée sur plusieurs lignes, alors notre fonction va à nouveau avoir besoin du traditionnel couple d’accolades ainsi qu’on précise explicitement une instruction return dans le cas où l’on souhaite que la fonction retourne une valeur.
Les particularités des fonctions fléchées
En plus de leur syntaxe très compacte, les fonctions fléchées vont posséder certains comportements différents des fonctions classiques.
Les comportements intéressants à noter ici sont que les fonctions fléchées ne possèdent pas de valeur pour this ni pour l’objet arguments.
Les fonctions fléchées et le mot clef this
Pour rappel, le mot clef this est utilisé avec des méthodes d’un d’objet pour accéder à des informations stockées dans l’objet. Le mot clef this va dans ce cas être substitué par l’objet utilisant la méthode lors de son appel.
See the Pen
Cours JavaScript 10.2.7 by Pierre (@pierregiraud)
on CodePen.
Pour aller plus loin, vous devez savoir qu’en JavaScript, à la différence de la plupart des langages, le mot clef this n’est pas lié à un objet en particulier. En effet, la valeur de this va être évaluée au moment de l’appel de la méthode dans laquelle il est présent en JavaScript.
Ainsi, la valeur de this ne va pas dépendre de l’endroit où la méthode a été déclarée mais de l’objet qui l’appelle. Cela permet notamment à une méthode d’être réutilisée par différents objets.
Comme la valeur de this ne dépend pas de l’endroit où la méthode a été déclarée, on va en fait pouvoir utiliser ce mot clef dans n’importe quelle fonction.
See the Pen
Cours JavaScript 10.2.8 by Pierre (@pierregiraud)
on CodePen.
Les fonctions fléchées, cependant, sont différentes des autres fonctions au sens où elles ne possèdent pas de valeur propre pour this : si on utilise ce mot clef dans une fonction fléchée, alors la valeur utilisée pour celui-ci sera celle du contexte de la fonction fléchée c’est-à-dire celle de la fonction englobante.
See the Pen
Cours JavaScript 10.2.9 by Pierre (@pierregiraud)
on CodePen.
Les fonctions fléchées et l’objet arguments
L’objet arguments est un objet qui recense les différents arguments passés à une fonction. Cet objet est une propriété disponible dans toutes les fonctions à l’exception des fonctions fléchées.
L’objet arguments est semblable à un tableau et contient une entrée pour chaque argument passé à la fonction, l’indice de la première entrée commençant à 0.
Aujourd’hui, on préfèrera cependant manipuler les arguments en utilisant les paramètres du reste plutôt que cet objet tant que possible.
