Metodi degli array in JavaScript: map, filter e reduce

Gli array hanno una cassetta degli attrezzi

Gli array di JavaScript portano con sé un gran numero di metodi integrati. Quasi tutto ciò per cui scriveresti un ciclo for (trasformare valori, sceglierne alcuni, sommarli) ha un metodo che lo fa in una riga, si legge meglio e si combina facilmente con gli altri.

Il kit di base sono tre metodi: map, filter e reduce. Impara questi e qualcuno dei loro cugini, e il tuo codice pieno di cicli si riduce a qualcosa che capisci con un'occhiata.

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

const doubled = nums.map(n => n * 2);
const evens = nums.filter(n => n % 2 === 0);
const total = nums.reduce((sum, n) => sum + n, 0);

console.log(doubled);
console.log(evens);
console.log(total);

Ogni metodo riceve una callback e restituisce qualcosa. Nessuno di loro ha modificato nums: è un concetto che vale la pena assimilare presto.

map: trasformare ogni elemento

map riceve una funzione e la chiama su ogni elemento, raccogliendo i valori restituiti in un nuovo array della stessa lunghezza. Usalo quando vuoi "un output per ogni input".

const users = [
    { name: "Ada", age: 36 },
    { name: "Boris", age: 29 },
    { name: "Chen", age: 41 },
];

const names = users.map(user => user.name);
const labels = users.map(user => `${user.name} (${user.age})`);

console.log(names);
console.log(labels);

La callback riceve anche l'indice come secondo argomento, se ti serve: arr.map((item, i) => ...). Se non ti serve, ignoralo.

Un errore comune: usare map quando l'array restituito non ti serve. Se vuoi solo stampare ogni elemento o salvarlo in un database, quello è un lavoro da forEach o da un semplice ciclo.

filter: tenere quelli che corrispondono

filter chiama un predicato (una funzione che restituisce vero o falso) su ogni elemento e tiene quelli che restituiscono un valore truthy. Il nuovo array ha la stessa lunghezza o è più corto.

const products = [
    { name: "Pen", price: 2, inStock: true },
    { name: "Desk", price: 180, inStock: false },
    { name: "Lamp", price: 35, inStock: true },
    { name: "Chair", price: 90, inStock: true },
];

const available = products.filter(p => p.inStock);
const affordable = products.filter(p => p.price < 50);

console.log(available);
console.log(affordable);

map e filter si concatenano in modo naturale. Leggi la catena da sinistra a destra come una pipeline:

const products = [
    { name: "Pen", price: 2, inStock: true },
    { name: "Desk", price: 180, inStock: false },
    { name: "Lamp", price: 35, inStock: true },
];

const inStockNames = products
    .filter(p => p.inStock)
    .map(p => p.name);

console.log(inStockNames);

Prima filtra, poi trasforma: così map lavora solo sugli elementi sopravvissuti.

reduce: ridurre un array a un solo valore

reduce è il più generale dei tre. Gli passi una funzione reducer (accumulator, item) => newAccumulator e un valore iniziale. Percorre l'array, passando ogni elemento al reducer insieme all'accumulatore calcolato fin lì, e restituisce il valore finale dell'accumulatore.

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

const sum = nums.reduce((acc, n) => acc + n, 0);
const max = nums.reduce((acc, n) => (n > acc ? n : acc), -Infinity);

console.log(sum);
console.log(max);

Il risultato non deve per forza essere un numero. Può essere un oggetto, un altro array, una stringa, qualunque cosa tu costruisca:

const people = [
    { name: "Ada", team: "red" },
    { name: "Boris", team: "blue" },
    { name: "Chen", team: "red" },
    { name: "Dari", team: "blue" },
];

const byTeam = people.reduce((acc, person) => {
    (acc[person.team] ??= []).push(person.name);
    return acc;
}, {});

console.log(byTeam);

Passa sempre il valore iniziale (il secondo argomento). Senza, reduce usa il primo elemento come accumulatore iniziale, il che si rompe con gli array vuoti e spesso non fa comunque quello che vuoi.

reduce è potente ma può diventare difficile da leggere quando la logica si complica. Se il tuo reducer supera poche righe, un semplice ciclo for...of è spesso più chiaro.

forEach: effetti collaterali, nessun valore restituito

forEach è come map ma senza l'array restituito. Esiste per quando vuoi fare qualcosa con ogni elemento (stamparlo, chiamare un'API, aggiornare il DOM) e non ti serve una nuova collezione.

const messages = ["hi", "hello", "hey"];

messages.forEach((msg, i) => {
    console.log(`${i}: ${msg}`);
});

Due cose da sapere:

• forEach restituisce undefined. Non puoi concatenarci dopo .map().
• Non puoi uscire in anticipo da un forEach con break. Se ti serve un'uscita anticipata, usa for...of oppure some/every.

Se ti ritrovi a scrivere arr.forEach(x => results.push(transform(x))), quello è un map.

find e findIndex: ne basta uno

find restituisce il primo elemento che soddisfa un predicato, oppure undefined se nessuno corrisponde. findIndex restituisce l'indice (oppure -1).

const users = [
    { id: 1, name: "Ada" },
    { id: 2, name: "Boris" },
    { id: 3, name: "Chen" },
];

const boris = users.find(u => u.name === "Boris");
const borisIndex = users.findIndex(u => u.name === "Boris");

console.log(boris);
console.log(borisIndex);

find si ferma alla prima corrispondenza. Non usare filter(...)[0]: scorre tutto l'array solo per buttare via il resto.

some ed every: domande sì o no

some restituisce true se almeno un elemento supera il test. every restituisce true solo se lo superano tutti.

const scores = [82, 91, 77, 64, 88];

console.log(scores.some(s => s >= 90));   // true - at least one A
console.log(scores.every(s => s >= 60));  // true - nobody failed
console.log(scores.every(s => s >= 80));  // false

Entrambi si fermano appena possono: some al primo true, every al primo false. Sono lo strumento giusto per domande del tipo "ce n'è almeno uno che…" o "lo fanno tutti…".

slice vs splice: copiare o tagliare

Questi due hanno nomi simili ma fanno cose molto diverse.

slice(start, end) restituisce una copia superficiale di una parte dell'array. Non modifica nulla. end è escluso; omettilo per arrivare fino in fondo.

const letters = ["a", "b", "c", "d", "e"];

const middle = letters.slice(1, 4);
const last = letters.slice(-2);

console.log(middle);
console.log(last);
console.log(letters);  // unchanged

splice(start, deleteCount, ...items) modifica l'array sul posto. Rimuove deleteCount elementi a partire da start, eventualmente ne inserisce di nuovi, e restituisce gli elementi rimossi.

const letters = ["a", "b", "c", "d", "e"];

const removed = letters.splice(1, 2, "X", "Y", "Z");

console.log(letters);   // ["a", "X", "Y", "Z", "d", "e"]
console.log(removed);   // ["b", "c"]

Per ricordarlo: slice è sicuro (copia), splice opera col bisturi direttamente sull'array.

Metodi che modificano e metodi che non modificano

Questa distinzione conta. Il codice che modifica per sbaglio un array condiviso produce uno dei bug più fastidiosi da rintracciare.

Modificano l'array (cambiano l'originale e di solito restituiscono altro):

• push, pop, shift, unshift
• splice, sort, reverse
• fill, copyWithin

Non modificano l'array (restituiscono un nuovo array o valore, l'originale resta intatto):

• map, filter, slice, concat
• flat, flatMap
• find, findIndex, some, every, includes, indexOf
• reduce, reduceRight

I due a cui fare attenzione sono sort e reverse: sembrano innocui e modificano l'array in silenzio. Se ti serve una copia ordinata, prima fai uno slice:

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

const sorted = nums.slice().sort((a, b) => a - b);

console.log(sorted);
console.log(nums);  // unchanged

Il JavaScript moderno ha anche i gemelli che non modificano: toSorted, toReversed, toSpliced e with. Restituiscono nuovi array e lasciano stare l'originale. Sono supportati da tutti i runtime attuali: usali quando li hai a disposizione.

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

console.log(nums.toSorted((a, b) => a - b));
console.log(nums.toReversed());
console.log(nums);  // still [3, 1, 4, 1, 5]

flat e flatMap

flat appiattisce gli array annidati di un livello (o di più, con un argomento di profondità). flatMap è un map seguito da un flat di un livello: utile quando ogni elemento produce zero o più risultati.

const nested = [[1, 2], [3, 4], [5]];
console.log(nested.flat());

const sentences = ["hello world", "how are you"];
const words = sentences.flatMap(s => s.split(" "));
console.log(words);

flatMap è il modo pulito per "espandere" gli elementi (un input, molti output) senza un passaggio flat() in più.

Mettiamo tutto insieme

Un piccolo esempio realistico. Data una lista di ordini, calcola il ricavo totale degli ordini completati sopra i 50 $:

const orders = [
    { id: 1, total: 120, status: "completed" },
    { id: 2, total: 30, status: "completed" },
    { id: 3, total: 200, status: "pending" },
    { id: 4, total: 75, status: "completed" },
    { id: 5, total: 45, status: "completed" },
];

const revenue = orders
    .filter(o => o.status === "completed")
    .filter(o => o.total > 50)
    .reduce((sum, o) => sum + o.total, 0);

console.log(revenue);

Tre metodi, una pipeline, nessun contatore da gestire. Ogni passaggio descrive quello che fa. Potresti unire le due chiamate a filter, ma tenerle separate si legge bene e a volte aiuta durante il debug.

Prossimo passo: Map e Set

Gli array gestiscono bene le sequenze ordinate, ma sono scomodi quando ti servono ricerche veloci per chiave o una collezione di valori unici. JavaScript ha due strutture dati integrate proprio per questi casi, Map e Set, e sono l'argomento della prossima pagina.