JavaScript Academy · Leçon

Composition de fonctions

Combinez de petites fonctions en pipelines.

Composition de fonctions est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Qu’est-ce que la composition de fonctions ?

La composition de fonctions combine de petites fonctions en une seule. La composition de f et g produit une fonction dans laquelle la sortie de g devient l’entrée de f.

Mathématiquement : compose(f, g)(x) = f(g(x)). Les données circulent de droite à gauche.

Deux petites fonctions

La composition commence par des fonctions simples, chacune ayant un seul objectif. Voici deux transformations que nous allons combiner.

const double = x => x * 2;
const increment = x => x + 1;

console.log(double(5));
console.log(increment(5));

Composer manuellement

La composition la plus explicite consiste simplement à appeler une fonction sur le résultat d’une autre. Lisez-la de l’intérieur vers l’extérieur : increment s’exécute d’abord, puis double.

const double = x => x * 2;
const increment = x => x + 1;

const result = double(increment(5));
console.log(result);

Une fonction compose pour deux fonctions

Encapsulez ce schéma dans une fonction compose réutilisable. Elle reçoit f et g, puis renvoie une nouvelle fonction qui applique d’abord g, puis f.

const compose = (f, g) => x => f(g(x));

const double = x => x * 2;
const increment = x => x + 1;

const doubleThenAfterIncrement = compose(double, increment);
console.log(doubleThenAfterIncrement(5));

L’ordre est important

La composition n’est pas commutative. compose(f, g) diffère de compose(g, f), car la fonction de droite s’exécute en premier.

const compose = (f, g) => x => f(g(x));

const double = x => x * 2;
const increment = x => x + 1;

console.log(compose(double, increment)(5));
console.log(compose(increment, double)(5));

Lire de droite à gauche

Dans compose(a, b, c)(x), l’appel s’évalue comme a(b(c(x))). La fonction la plus à droite reçoit l’entrée en premier. Gardez cette direction à l’esprit pour éviter les erreurs.

const compose = (f, g) => x => f(g(x));

const shout = s => s.toUpperCase();
const exclaim = s => s + '!';

const loud = compose(shout, exclaim);
console.log(loud('hello'));

Composer des transformations de chaînes

La composition est idéale pour les chaînes de traitement de texte : supprimer les espaces superflus, passer en minuscules, puis remplacer les espaces, chaque étape étant une petite fonction.

const compose = (f, g) => x => f(g(x));

const trim = s => s.trim();
const lower = s => s.toLowerCase();

const clean = compose(lower, trim);
console.log(clean('   HELLO World  '));

La composition avec des nombres

Enchaîner des opérations mathématiques est un exemple classique. Chaque fonction reste très facile à vérifier indépendamment.

const compose = (f, g) => x => f(g(x));

const square = x => x * x;
const negate = x => -x;

const negativeSquare = compose(negate, square);
console.log(negativeSquare(4));

Pourquoi utiliser compose

La composition permet à chaque fonction de rester ciblée et réutilisable, tout en supprimant l’encombrement des appels imbriqués. Au lieu de disperser f(g(h(x))) dans votre code, vous construisez une chaîne de traitement nommée une seule fois et la réutilisez.

const compose = (f, g) => x => f(g(x));

const toCents = d => Math.round(d * 100);
const addLabel = c => c + ' cents';

const priceLabel = compose(addLabel, toCents);
console.log(priceLabel(2.5));

Composition et curryfication ensemble

Les fonctions curryfiées se composent parfaitement, car chacune produit une fonction à un argument, exactement ce qu’attend la composition.

const compose = (f, g) => x => f(g(x));
const add = a => b => a + b;
const multiply = a => b => a * b;

const addThenDouble = compose(multiply(2), add(3));
console.log(addThenDouble(5));

Vers plusieurs fonctions

Jusqu’à présent, compose gérait deux fonctions. En pratique, la composition prend en charge un nombre quelconque de fonctions. Dans la prochaine leçon, vous construirez un compose général et son équivalent de gauche à droite, pipe, à l’aide de reduce.

const compose = (f, g) => x => f(g(x));
const a = x => x + 1;
const b = x => x * 2;
const c = x => x - 3;

const combined = compose(a, compose(b, c));
console.log(combined(10));

Vérification rapide

Si compose = (f, g) => x => f(g(x)), que renvoie compose(double, increment)(5) lorsque double multiplie par 2 et que increment ajoute 1 ?

Récapitulatif : composition de fonctions

Vous avez appris à combiner des fonctions :

compose(f, g)(x) est égal à f(g(x)), évalué de droite à gauche.
L’ordre est important : la composition n’est pas commutative.
La composition conserve des fonctions petites, nommées et réutilisables.
Les fonctions curryfiées se composent proprement. Vous allez ensuite généraliser cette approche à un nombre quelconque de fonctions.

Questions Fréquemment Posées

La leçon « Composition de fonctions » est-elle gratuite ?

Oui — le texte complet de « Composition de fonctions » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Composition de fonctions » ?

Combinez de petites fonctions en pipelines. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Composition de fonctions » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy