JavaScript Academy · Lezione

Composizione di funzioni

Combini piccole funzioni in pipeline.

Composizione di funzioni è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Che cos'è la composizione di funzioni?

La composizione di funzioni combina funzioni piccole in un'unica funzione. Componendo f e g si ottiene una funzione in cui l'output di g diventa l'input di f.

In termini matematici: compose(f, g)(x) = f(g(x)). I dati fluiscono da destra verso sinistra.

Due funzioni semplici

La composizione parte da funzioni semplici e con un unico scopo. Ecco due trasformazioni che combineremo.

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

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

Composizione manuale

La forma più esplicita di composizione consiste semplicemente nel chiamare una funzione sul risultato di un'altra. La si legge dall'interno verso l'esterno: prima viene eseguita increment, poi double.

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

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

Una funzione compose per due funzioni

Si può racchiudere questo schema in un compose riutilizzabile. Riceve f e g e restituisce una nuova funzione che applica prima g e poi 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'ordine è importante

La composizione non è commutativa. compose(f, g) è diverso da compose(g, f), perché la funzione a destra viene eseguita per prima.

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));

Lettura da destra verso sinistra

In compose(a, b, c)(x) la chiamata viene valutata come a(b(c(x))). La funzione più a destra opera per prima sull'input. Tenga presente questa direzione per evitare errori.

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'));

Composizione di trasformazioni per stringhe

La composizione è ideale per le pipeline di testo: rimuovere gli spazi iniziali e finali, convertire in minuscolo e poi sostituire gli spazi, con una piccola funzione per ogni passaggio.

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  '));

Composizione con i numeri

Concatenare operazioni matematiche è un esempio classico. Ogni funzione rimane facilmente verificabile in modo indipendente.

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));

Perché usare compose?

La composizione mantiene ogni funzione focalizzata e riutilizzabile ed elimina la confusione delle chiamate annidate. Invece di disseminare nel codice f(g(h(x))), si costruisce una pipeline con un nome e la si riutilizza.

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));

Composizione e currying insieme

Le funzioni sottoposte a currying si compongono perfettamente, perché ciascuna restituisce una funzione a un argomento, esattamente ciò che la composizione richiede.

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));

Verso molte funzioni

Finora compose gestiva due funzioni. Nella pratica, la composizione supporta un numero qualsiasi di funzioni. Nella prossima lezione costruirà un compose generico e il suo corrispettivo da sinistra a destra, pipe, usando 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));

Verifica rapida

Se compose = (f, g) => x => f(g(x)), che cosa restituisce compose(double, increment)(5) quando double moltiplica per 2 e increment aggiunge 1?

Riepilogo: composizione di funzioni

Ha imparato a combinare le funzioni:

compose(f, g)(x) equivale a f(g(x)) e viene valutato da destra verso sinistra.
L'ordine è importante: la composizione non è commutativa.
La composizione mantiene le funzioni piccole, dotate di un nome e riutilizzabili.
Le funzioni sottoposte a currying si compongono senza difficoltà. Il prossimo passo sarà generalizzare a un numero qualsiasi di funzioni.

Domande Frequenti

La lezione «Composizione di funzioni» è gratuita?

Sì — il testo completo di «Composizione di funzioni» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Composizione di funzioni»?

Combini piccole funzioni in pipeline. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Composizione di funzioni»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy