Capire Map, Filter e Reduce in JavaScript

I metodi map, filter e reduce sono fondamentali per manipolare e trasformare array in JavaScript. Tuttavia, sfruttarli appieno richiede una comprensione approfondita delle loro capacità e del loro funzionamento. In questa guida, esploreremo non solo il loro utilizzo di base, ma anche strategie avanzate e casi d’uso complessi che mostrano il loro vero potenziale.

---

🔑 Concetti Chiave

1. Map

Il metodo map crea un nuovo array applicando una funzione a ciascun elemento dell’array originale.

Caratteristiche:

• Non modifica l’array originale.

• Ritorna sempre un array della stessa lunghezza.

• Accetta una funzione di callback con tre parametri: valore corrente, indice, e array stesso.

Sintassi:

const newArray = originalArray.map((currentValue, index, array) => {
    // Trasformazione
    return transformedValue;
});

---

2. Filter

Il metodo filter crea un nuovo array contenente solo gli elementi che soddisfano una condizione.

Caratteristiche:

• Restituisce un array più piccolo o della stessa dimensione.

• Accetta una funzione di callback che restituisce true o false per ciascun elemento.

const newArray = originalArray.filter((currentValue, index, array) => {
    return condition;
});

---

3. Reduce

Il metodo reduce (che abbiamo anche visto in pratica in questo articolo: link), esegue una funzione su ciascun elemento dell’array, accumulando un risultato finale.

Caratteristiche:

• Può restituire qualsiasi tipo di valore.

• Richiede una funzione di callback con due parametri principali: l’accumulatore e il valore corrente.

• Accetta un valore iniziale per l’accumulatore come secondo argomento.

Sintassi:

const result = originalArray.reduce((accumulator, currentValue, index, array) => {
    return updatedAccumulator;
}, initialValue);

---

💻 Esempi Pratici

1. Map: Trasformare Dati

Applichiamo uno sconto del 20% a una lista di prezzi:

const prices = [50, 100, 150];
const discountedPrices = prices.map(price => price * 0.8);
console.log(discountedPrices); // Output: [40, 80, 120]

2. Filter: Filtrare Elementi

Filtriamo prodotti che costano meno di $100:

const products = [
    { name: 'Product 1', price: 50 },
    { name: 'Product 2', price: 150 },
    { name: 'Product 3', price: 30 },
];
const affordableProducts = products.filter(product => product.price < 100);
console.log(affordableProducts); // Output: [{ name: 'Product 1', price: 50 }, { name: 'Product 3', price: 30 }]

3. Reduce: Calcolare un Totale

const numbers = [10, 20, 30];
const total = numbers.reduce((sum, num) => sum + num, 0);
console.log(total); // Output: 60

---

🔄 Combina Map, Filter e Reduce

Per calcolare il prezzo totale scontato dei prodotti nel carrello:

const products = [
    { name: 'Product 1', price: 100, inCart: true },
    { name: 'Product 2', price: 200, inCart: false },
    { name: 'Product 3', price: 300, inCart: true },
];

const totalDiscountedPrice = products
    .filter(product => product.inCart) // Passaggio 1: Filtra i prodotti nel carrello
    .map(product => product.price * 0.8) // Passaggio 2: Applica uno sconto del 20%
    .reduce((total, discountedPrice) => total + discountedPrice, 0); // Passaggio 3: Somma i prezzi

console.log(totalDiscountedPrice); // Output: 320

---

🥷🏻 Casi d’Uso Avanzati

1. Raggruppare Elementi con Reduce

Raggruppiamo oggetti in base a una proprietà:

const people = [
    { name: 'Alice', group: 'A' },
    { name: 'Bob', group: 'B' },
    { name: 'Charlie', group: 'A' },
];

const grouped = people.reduce((acc, person) => {
    (acc[person.group] = acc[person.group] || []).push(person);
    return acc;
}, {});

console.log(grouped);
// Output: { A: [{ name: 'Alice', group: 'A' }, { name: 'Charlie', group: 'A' }], B: [{ name: 'Bob', group: 'B' }] }

2. Contare Elementi con Reduce

Contiamo la frequenza di valori in un array:

const items = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];

const counts = items.reduce((acc, item) => {
    acc[item] = (acc[item] || 0) + 1;
    return acc;
}, {});

console.log(counts);
// Output: { apple: 3, banana: 2, orange: 1 }

---

❓Domande Frequenti

Domanda: Quando usare reduce rispetto a map o filter?

Usa reduce quando devi ottenere un singolo valore (ad esempio, un totale o un oggetto combinato). Usa map e filter per trasformare o filtrare array.

Domanda: Posso combinare più metodi?

Sì, map, filter e reduce possono essere combinati per creare pipeline potenti, come mostrato negli esempi sopra.

Domanda: Come posso migliorare le prestazioni?

Evita di concatenare troppi metodi, poiché ognuno crea un nuovo array. Valuta di utilizzare reduce per combinare logiche complesse.

---

map, filter e reduce sono strumenti indispensabili per lavorare con array in JavaScript. Capire quando e come usarli ti aiuterà a scrivere codice più pulito, leggibile ed efficiente.

💬 Hai usato questi metodi nei tuoi progetti? Qual è la tua combinazione preferita? Condividi le tue esperienze nei commenti! 😊