Tutoriel

Les Fonctions Fléchées en JavaScript

Javascript

Introduction aux fonctions fléchées

Les fonctions fléchées (arrow functions) sont une syntaxe introduite dans ES6 (ECMAScript 2015) qui offre une manière plus concise d'écrire des fonctions en JavaScript. Elles sont particulièrement utiles pour les fonctions courtes et les callbacks.

// Fonction classique
function additionner(a, b) {
  return a + b;
}

// Fonction fléchée équivalente
const additionner = (a, b) => {
  return a + b;
}

// Version encore plus courte (retour implicite)
const additionner = (a, b) => a + b;

Syntaxe de base

La syntaxe des fonctions fléchées varie selon le nombre de paramètres et la complexité du corps de la fonction. Voici les différentes formes possibles :

// Un seul paramètre : pas besoin de parenthèses
const carre = x => x * x;

// Plusieurs paramètres : parenthèses obligatoires
const multiplier = (a, b) => a * b;

// Aucun paramètre : parenthèses vides obligatoires
const direBonjour = () => console.log("Bonjour !");

// Corps de fonction avec plusieurs lignes : accolades et return obligatoires
const calculer = (a, b) => {
  const somme = a + b;
  const produit = a * b;
  return { somme, produit };
};

Différences avec les fonctions classiques

Les fonctions fléchées ont plusieurs différences importantes avec les fonctions classiques, notamment concernant le contexte 

this
et la possibilité d'utiliser 
arguments
.

// Fonction classique : this est dynamique
const objet = {
  nom: "JavaScript",
  saluer: function() {
    console.log("Bonjour, je suis " + this.nom);
  }
};

// Fonction fléchée : this est lexical (hérité du contexte parent)
const objet2 = {
  nom: "JavaScript",
  saluer: () => {
    console.log("Bonjour, je suis " + this.nom); // this n'est pas l'objet
  }
};

// Les fonctions fléchées ne peuvent pas être utilisées comme constructeurs
// const MaClasse = () => {}; // ❌ Erreur
// new MaClasse(); // ❌ Erreur

// Les fonctions classiques peuvent être des constructeurs
function MaClasse() {} // ✅ OK
new MaClasse(); // ✅ OK

Cas d'usage pratiques

Les fonctions fléchées sont particulièrement utiles dans plusieurs situations courantes : manipulation de tableaux, callbacks, et méthodes de classe. Voici des exemples pratiques :

// 1. Méthodes de tableaux (map, filter, reduce)
const nombres = [1, 2, 3, 4, 5];
const doubles = nombres.map(n => n * 2);
const pairs = nombres.filter(n => n % 2 === 0);
const somme = nombres.reduce((acc, n) => acc + n, 0);

// 2. Callbacks et événements
button.addEventListener("click", () => {
  console.log("Bouton cliqué !");
});

// 3. Promesses et async/await
fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// 4. Méthodes de classe (attention au this)
class MonComposant {
  constructor() {
    this.valeur = 42;
  }
  
  // Fonction fléchée pour préserver le contexte
  afficher = () => {
    console.log(this.valeur); // ✅ this est toujours MonComposant
  }
}

Section commentaire