Fonctions Fléchées vs function en JavaScript

Syntaxe, this, hoisting, arguments — quand utiliser l'une ou l'autre

Sections

20+

Exemples

ES6+

Standard

📚 Navigation

🏠 Hub Programmation
⚡ Cours JavaScript
🔤 let, const, var
📦 Tableaux

📋 Sommaire

1. La syntaxe function classique
5. Le piège de this
2. La syntaxe arrow function
6. Quand NE PAS utiliser les arrows
3. Raccourcis d'écriture
7. Tableau comparatif complet
4. Les 4 différences clés
8. Questions fréquentes

SECTION 01

La syntaxe function classique

// Déclaration de fonction (function declaration)
function additionner(a, b) // Expression de fonction (function expression)
const multiplier = function(a, b) ;

// Fonction nommée (utile pour le debugging)
const diviser = function diviserFn(a, b) ;

Les déclarations (function nom()) sont hoistées — tu peux les appeler avant leur déclaration dans le code. Les expressions (const nom = function()) ne le sont pas.

SECTION 02

La syntaxe arrow function (=>)

➡️ Introduite en ES6 (2015)

// Forme complète
const additionner = (a, b) => ;// Avec un seul paramètre : parenthèses optionnelles
const doubler = x => ;

// Sans paramètre : parenthèses obligatoires
const direBonjour = () => ;

SECTION 03

Raccourcis d'écriture

⚡ Return implicite

Si le corps de la fonction est une seule expression, tu peux retirer les et le return :

// Forme complète
const doubler = (x) => ;// Return implicite (même résultat)
const doubler = x => x * 2;

// Exemples concrets
const carre = x => x ** 2;
const isAdult = age => age >= 18;
const fullName = (first, last) => `$ $`;

// Parfait dans les callbacks
const doubles = [1, 2, 3].map(n => n * 2); // [2, 4, 6]
const pairs = [1, 2, 3, 4].filter(n => n % 2 === 0); // [2, 4]
const noms = users.map(u => u.nom); // [« Alice », « Bob »]

⚠️ Retourner un objet litéral

// ❌ ERREUR — les sont interprétées comme le corps de la fonction
const makeUser = name => ;
// retourne undefined (nom: est interprété comme un label)// ✅ CORRECT — entoure l'objet avec des parenthèses
const makeUser = name => ();
// retourne

// Très courant avec map
const formatted = users.map(u => ());

C'est le piège n°1 des arrow functions. Si tu retournes un objet avec le return implicite, entoure-le de (). Sans ça, JavaScript pense que les sont le corps de la fonction.

SECTION 04

Les 4 différences clés

Critère	function	Arrow =>
this	Son propre this (dynamique, dépend de l'appel)	Hérite du this du scope parent (lexical)
Hoisting	✅ Oui (déclarations)	❌ Non (jamais)
arguments	✅ Objet arguments disponible	❌ Pas d'objet arguments
Constructeur	✅ Peut être utilisée avec new	❌ Impossible avec new

SECTION 05

Le piège de this

🎯 La différence la plus importante

Avec function, this dépend de comment la fonction est appelée. Avec une arrow, this est celui du contexte où la fonction est définie.

const timer = ;

📦 Autre exemple : classe

class Counter

Règle simple : dans les callbacks (setTimeout, addEventListener, map, filter…), utilise des arrow functions. Le this sera celui que tu attends.

SECTION 06

Quand NE PAS utiliser les arrows

🚫 Méthodes d'objet

const user = ;

🚫 Autres cas à éviter

// ❌ Constructeurs
const Person = (name) => ;
new Person(« Alice »); // ❌ TypeError: Person is not a constructor// ❌ Prototypes
Person.prototype.greet = () => ;

// ❌ Quand tu as besoin de arguments
const sum = () => ;
// ✅ Utilise les rest parameters à la place
const sum = (…args) => args.reduce((a, b) => a + b, 0);

SECTION 07

Tableau comparatif complet

Situation	Utiliser	Pourquoi
Callbacks (map, filter, forEach)	Arrow =>	Concis, this lexical
setTimeout / setInterval	Arrow =>	this reste le scope parent
addEventListener callback	Arrow =>	this reste le scope parent
Fonctions utilitaires courtes	Arrow =>	Concis avec return implicite
async/await	Les deux	async () => ou async function
Méthodes d'objet litéral	Shorthand	method() — bon this
Méthodes de classe	Shorthand	method() dans le prototype
Constructeurs / new	function ou class	Arrow ne supporte pas new
Générateurs	function*	Arrow ne supporte pas yield

Résumé en une phrase : arrow function partout, sauf pour les méthodes d'objet (utilise le shorthand) et les constructeurs (utilise class).

SECTION 08

Questions fréquentes

Les arrow functions sont-elles plus performantes ?

Non — la performance est identique. La différence est uniquement syntaxique et comportementale (this, arguments, new). Les arrow functions ne sont ni plus rapides ni plus lentes que function.

Peut-on donner un nom à une arrow function ?

Pas directement dans la syntaxe (const fn = () => ). Mais JavaScript infère le nom de la variable : fn.name vaudra « fn ». Dans les stack traces et le debugging, le nom inféré apparaît.

Faut-il mettre les parenthèses avec un seul paramètre ?

C'est optionnel : x => x * 2 et (x) => x * 2 sont identiques. La convention varie selon les projets. Prettier et Airbnb recommandent « always » (toujours les parenthèses) pour la cohérence. ESLint permet de configurer.

C'est quoi la syntaxe shorthand method ?

C'est la syntaxe ES6 pour définir des méthodes dans un objet : { greet() } au lieu de { greet: function() }. Même comportement que function (son propre this), mais plus concis. C'est le standard pour les objets et les classes.

📚 Fiches JavaScript liées

🔤 let, const, var
📦 Tableaux : map, filter, reduce
⏳ Promesses & async/await
🧩 Destructuring
🔁 Boucles
⚡ Cours JavaScript complet
🏠 Hub Programmation

Fonctions fléchées vs function en JavaScript — Guide complet

Référence : MDN Arrow functions