Funzioni di ordine superiore in JavaScript: map, filter, reduce e callback

Le funzioni sono valori

In JavaScript, una funzione è un valore come qualsiasi altro. Puoi salvarla in una variabile, metterla in un array, passarla a un'altra funzione o restituirla da una funzione. Questo fatto da solo apre un intero stile di programmazione:

const square = (n) => n * n;
const operations = [square, (n) => n + 1];

console.log(square);          // the function itself
console.log(operations[0](5)); // call it out of the array

Quando ti abitui a trattare le funzioni come valori, le funzioni di ordine superiore smettono di sembrare misteriose. Una funzione di ordine superiore è semplicemente una funzione che riceve una funzione come argomento, restituisce una funzione, oppure entrambe le cose. Questa è tutta la definizione.

Ricevere una funzione come argomento

La forma più comune: una funzione che accetta una callback e la esegue per te. Le hai già usate senza pensarci.

[1, 2, 3].forEach((n) => console.log(n * 10));

setTimeout(() => console.log("più tardi"), 100);

forEach è di ordine superiore: prende la tua funzione e la chiama una volta per ogni elemento. setTimeout è di ordine superiore: prende la tua funzione e la chiama dopo un certo ritardo. Tu ti concentri su cosa fare; loro si occupano di quando e quante volte.

Scriverne una tua è la stessa cosa. Ecco una piccola funzione che esegue una callback solo se una condizione è vera:

function runIf(condition, action) {
    if (condition) action();
}

runIf(2 + 2 === 4, () => console.log("la matematica funziona ancora"));
runIf(false, () => console.log("non viene mai eseguito"));

action è un parametro che contiene una funzione. Chiamarlo con action() esegue qualunque cosa sia stata passata.

Le tre che userai davvero: map, filter, reduce

Gli array hanno metodi di ordine superiore che sostituiscono la maggior parte dei cicli for che altrimenti scriveresti. Impara questi tre e una grande quantità di codice quotidiano diventa più corta e più chiara.

map: trasformare ogni elemento

const prices = [10, 20, 30];
const withTax = prices.map((price) => price * 1.08);

console.log(withTax);

map chiama la tua funzione una volta per elemento e raccoglie i valori restituiti in un nuovo array. Stessa lunghezza, contenuto trasformato. L'array originale non viene modificato.

filter: tenere quelli che corrispondono

const users = [
    { name: "Ada", active: true },
    { name: "Boris", active: false },
    { name: "Chen", active: true },
];

const active = users.filter((user) => user.active);
console.log(active);

filter tiene gli elementi per cui la callback restituisce un valore truthy e scarta gli altri. Il risultato è un nuovo array, eventualmente più corto.

reduce: ridurre l'array a un solo valore

const numbers = [1, 2, 3, 4];
const total = numbers.reduce((sum, n) => sum + n, 0);

console.log(total);

reduce è quella più generale. La callback riceve l'accumulatore corrente e l'elemento attuale; qualunque cosa tu restituisca diventa l'accumulatore successivo. Il secondo argomento (qui 0) è il valore iniziale.

Puoi concatenarle. È qui che questo stile ripaga:

const orders = [
    { item: "book", price: 12, paid: true },
    { item: "pen", price: 3, paid: false },
    { item: "mug", price: 8, paid: true },
];

const revenue = orders
    .filter((o) => o.paid)
    .map((o) => o.price)
    .reduce((sum, p) => sum + p, 0);

console.log(revenue);

Leggilo dall'alto in basso: tieni gli ordini pagati, estrai il prezzo, somma tutto. Nessun ciclo, nessun contatore mutabile, nessun errore di uno di cui preoccuparsi.

Restituire una funzione da una funzione

L'altra metà dell'ordine superiore. Una funzione che costruisce e restituisce un'altra funzione:

function multiplyBy(factor) {
    return (n) => n * factor;
}

const double = multiplyBy(2);
const triple = multiplyBy(3);

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

multiplyBy(2) viene eseguita una volta e restituisce una funzione nuova di zecca. Quella nuova funzione si ricorda ancora di factor: è una closure, e avrà una pagina tutta sua più avanti. Per ora il concetto chiave è questo: chiamare multiplyBy con argomenti diversi ti dà funzioni specializzate diverse costruite dallo stesso modello.

Questo schema compare ovunque:

function prefixer(prefix) {
    return (message) => `[${prefix}] ${message}`;
}

const warn = prefixer("WARN");
const info = prefixer("INFO");

console.log(warn("disk almost full"));
console.log(info("backup complete"));

Una definizione, due funzioni riutilizzabili. Meglio che scrivere warn e info a mano e doverle tenere allineate.

Funzioni con nome e callback inline

Puoi passare una arrow function inline oppure passare una funzione per nome. Funzionano entrambe: scegli quella che si legge meglio.

const nums = [1, 2, 3, 4, 5];

// Inline: good when the logic is short and used once.
const doubled = nums.map((n) => n * 2);

// By name: good when the logic has a meaningful name or is reused.
const isEven = (n) => n % 2 === 0;
const evens = nums.filter(isEven);

console.log(doubled, evens);

Quando passi isEven (senza parentesi), stai consegnando la funzione stessa. Aggiungere () la chiamerebbe subito e passerebbe il risultato, un errore comune tra i principianti:

nums.filter(isEven);     // correct: passes the function
nums.filter(isEven());   // wrong: calls isEven with no args, passes the result

Se la callback comincia a superare un paio di righe, estraila e dagli un nome. Il codice intorno di solito ne guadagna in leggibilità.

Un esempio completo

Le funzioni di ordine superiore danno il meglio quando componi piccoli pezzi. Supponi di avere una lista di prodotti e di volere i nomi degli articoli economici e disponibili, in maiuscolo:

const products = [
    { name: "notebook", price: 4, stock: 12 },
    { name: "laptop", price: 900, stock: 0 },
    { name: "pen", price: 1, stock: 50 },
    { name: "desk", price: 200, stock: 3 },
];

const affordable = (p) => p.price < 50;
const inStock = (p) => p.stock > 0;

const result = products
    .filter(affordable)
    .filter(inStock)
    .map((p) => p.name.toUpperCase());

console.log(result);

Ogni helper ha un solo compito. Ogni metodo degli array fa una sola trasformazione. La pipeline si legge come una specifica di ciò che vuoi, non come la descrizione di come scorrere i dati.

Quando non usarle

I metodi di ordine superiore sono ottimi, ma non sostituiscono un ciclo in ogni situazione:

• Se devi fermarti a metà, un for o un for...of con break è più chiaro che cercare di uscire da un forEach.
• Se dentro la callback fai qualcosa di asincrono, map e forEach non lo aspettano. Usa for...of con await, oppure Promise.all con map.
• Se la callback modifica uno stato condiviso, ti stai allontanando dai punti di forza di questo stile. Usa un ciclo normale o riorganizza il codice per restituire nuovi valori.

Usati dove hanno senso, map, filter e reduce eliminano la maggior parte del codice ripetitivo dei cicli. Usati ovunque, iniziano a peggiorare la leggibilità. Scegli lo strumento che rende più chiara l'intenzione.

Prossimo passo: gli oggetti

Le funzioni non sono gli unici valori su cui vale la pena costruire. Gli oggetti sono lo strumento principale di JavaScript per raggruppare dati e comportamenti correlati, e sono ciò di cui erano pieni la maggior parte degli array che hai appena filtrato e trasformato. Sono l'argomento della prossima pagina.