Arrow functions : pas juste une syntaxe plus courte
Si en JavaScript vous vous êtes déjà demandé quand utiliser les fonctions fléchées et quand utiliser les fonctions traditionnelles, vous n’êtes pas seul. Les différences vont bien au-delà de la syntaxe. Chez Eve Media, nous formons nos développeurs sur ces subtilités.
Syntaxe
Fonction traditionnelle : function add(a, b) { return a + b; }. Arrow function : const add = (a, b) => a + b;. Plus concis, surtout pour les fonctions courtes. Mais ce n’est pas qu’une question de caractères.
Le binding de this
La différence fondamentale : les arrow functions n’ont pas leur propre this. Elles capturent le this du contexte englobant (lexical this). Les fonctions traditionnelles ont leur propre this, déterminé à l’appel.
Conséquence pour les callbacks
Avant ES6, on utilisait var self = this ou .bind(this) pour garder le bon this dans les callbacks. Les arrow functions résolvent ce problème naturellement : le this est celui du contexte où la fonction est définie.
Méthodes d’objet
Pour les méthodes d’objet, préférez les fonctions traditionnelles. const obj = { name: ‘Eve’, greet: function() { return this.name; } }. Avec une arrow function, this ne serait pas l’objet.
Constructeurs
Les arrow functions ne peuvent pas être utilisées comme constructeurs. new (() => {}) lance une erreur. Pour les classes et constructeurs, utilisez function ou class.
arguments
Les fonctions traditionnelles ont accès à l’objet arguments (tous les arguments passés). Les arrow functions n’ont pas d’arguments propre. Utilisez les rest parameters (…args) à la place.
Hoisting
Les function declarations sont hoistées : vous pouvez les appeler avant leur définition dans le code. Les arrow functions assignées à des variables ne sont pas hoistées (comme toute variable).
Quand utiliser les arrow functions
Callbacks et fonctions passées en argument. Méthodes de tableau (map, filter, reduce). Fonctions courtes et simples. Quand vous voulez préserver le this du contexte parent.
Quand utiliser les fonctions traditionnelles
Méthodes d’objet qui utilisent this. Constructeurs et classes. Fonctions qui utilisent arguments. Event handlers dans certains frameworks (selon le comportement de this souhaité).
Dans React
Les arrow functions sont très utilisées dans React : handlers inline, callbacks. Pour les méthodes de classe, les class fields avec arrow functions évitent les problèmes de binding : handleClick = () => { … }.
Conclusion
Les arrow functions ne sont pas un remplacement universel des fonctions traditionnelles. Comprendre leurs différences (surtout le this) permet de choisir la bonne forme selon le contexte.
Chez Eve Media, nous maîtrisons les subtilités de JavaScript. Contactez-nous pour vos projets de développement.
