Différences entre les fonctions classiques et les fonctions fléchées en JavaScript : quand utiliser quelle syntaxe ?

• En JavaScript, il existe plusieurs façons de définir une fonction : déclaration de fonction avec le mot-clé function, expression de fonction et fonction fléchée
• Les déclarations de fonction bénéficient du hoisting, ce qui permet de les référencer à n’importe quel endroit du code
• Les fonctions fléchées ont pour avantage une syntaxe concise, mais présentent aussi des différences importantes, comme l’absence de liaison de this / arguments / super
• Les fonctions fléchées ne conviennent pas aux fonctions constructrices, aux générateurs ni aux méthodes
• Pour des callbacks simples ou des fonctions anonymes, les fonctions fléchées sont plus adaptées

---

Function Declarations, Function Expressions, and Arrow Functions

• En JavaScript, on peut définir une fonction de trois façons : déclaration de fonction (statement), expression de fonction (expression) et fonction fléchée (arrow function)
• Une déclaration de fonction lie directement un nom, comme dans function isVowel(chr) { ... }, et peut être référencée depuis n’importe où dans le code (hoisting). Son nom apparaît aussi clairement dans les stack traces et lors du debugging
• Une expression de fonction consiste à affecter une fonction anonyme à une variable, comme dans const takeWhile = function(predicate, arr) { ... }
• Une expression de fonction peut aussi recevoir un nom en interne, mais ce nom n’est pas lié à la portée externe et sert surtout au suivi des erreurs dans les stack traces

Hoisting and Naming

• Les déclarations de fonction sont hoistées par le moteur JavaScript, et fonctionnent donc même si elles sont appelées avant leur déclaration
• Une expression de fonction anonyme ne peut être appelée qu’après l’affectation à la variable
• Pour le debugging, attribuer explicitement un nom à une fonction peut être avantageux dans les stack traces

Arrow Functions

• Syntaxe courte et concise : elles s’écrivent sous la forme (paramètres) => { ... }, sans le mot-clé function.
• Ce sont toujours des fonctions anonymes (même si elles peuvent être utilisées comme si elles avaient un nom lorsqu’elles sont affectées à une variable)
• Elles ne peuvent être utilisées que comme expressions, pas comme instructions
• Pas de liaison propre de this / arguments / super : contrairement aux déclarations et expressions de fonction, elles capturent le this de la portée englobante
• Lorsqu’il n’y a qu’une seule expression, on peut omettre les accolades et le return, et s’il n’y a qu’un seul paramètre, les parenthèses peuvent aussi être omises
• Impossible à utiliser comme constructeur : une fonction fléchée ne peut pas être appelée avec le mot-clé new et ne fonctionne donc pas comme fonction constructrice
• Pas de générateurs : on ne peut pas y utiliser yield, donc elles ne peuvent pas devenir des fonctions génératrices
• Exemple de code :

  const sum = (a, b) => a + b;  
  const square = x => x * x;  
  

Exemple pratique : this, constructeur et générateur

• Exemple montrant la différence de traitement de this entre une fonction classique et une fonction fléchée
  • Utilisée comme méthode dans un objet, une fonction classique fait pointer this vers l’objet lui-même, tandis qu’une fonction fléchée pointe vers undefined ou vers le this de la portée externe
• Définir une fonction constructrice sous forme de fonction fléchée provoque une TypeError
• Une fonction génératrice doit obligatoirement utiliser la syntaxe function*

Quelle syntaxe de fonction choisir, et quand ?

• Besoin d’un générateur (usage de yield) → utiliser function*
• Besoin d’utiliser this → utiliser le mot-clé function ou une méthode de classe
• Besoin de hoisting ou d’une meilleure lisibilité à haut niveau → utiliser une déclaration de fonction
• Si aucune de ces conditions ne s’applique → il est souvent plus avantageux d’utiliser une fonction fléchée pour écrire plus concisément

Conclusion

• En JavaScript, le choix de la syntaxe de fonction dépend de l’objectif, de la nécessité d’utiliser this, et du fait qu’il s’agisse ou non d’un constructeur ou d’un générateur
• Pour les callbacks courants et les fonctions simples, la fonction fléchée est le meilleur choix
• Pour les méthodes d’objet, les constructeurs et les générateurs, il faut utiliser la syntaxe function
• Si l’on a besoin du hoisting ou de plus de liberté dans l’ordre des déclarations, la déclaration de fonction est plus avantageuse

[ng0301]

Autant que les fondamentaux, la présence ou non d’un prototype aussi…
La manière de référencer les fonctions d’ordre supérieur créées aussi…

[bichi]

const a = (a: () => null): (() => () => null) =>() => a

[bichi]

() => ❤️