5 Metodi Fondamentali per Manipolare gli Array in JavaScript (con Esempi)

Se usi JavaScript, devi padroneggiare gli array. In questo articolo ti mostro i 5 metodi essenziali — .map(), .filter(), .reduce(), .find() e .forEach() — con esempi chiari e consigli pratici per usarli al meglio. Vedremo anche quando conviene applicarli e un rapido confronto che ti aiuterà a scegliere lo strumento giusto per ogni situazione. Pronto a scrivere codice più pulito ed efficace e a manipolare array in JavaScript come un vero pro?

1. .map()

Cosa fa

Crea un nuovo array in cui ogni elemento è il risultato della funzione passata come argomento.

const numeri = [1, 2, 3, 4];
const quadrati = numeri.map(num => num * num);
console.log(quadrati); // Output: [1, 4, 9, 16]

Quando usarlo

• Trasformazioni di ogni elemento: Se devi applicare una trasformazione (ad es. moltiplicare, formattare stringhe, creare nuovi oggetti) su ogni elemento di un array senza modificarlo direttamente, .map() è perfetto.
• Esempio reale: Generare un array di URL a partire da un elenco di “slug” di pagine o trasformare valori numerici in oggetti più complessi.

2. .filter()

Cosa fa

Filtra l’array in base a una condizione, restituendo un nuovo array con tutti gli elementi che la soddisfano.

const numeri = [1, 2, 3, 4, 5, 6];
const pari = numeri.filter(num => num % 2 === 0);
console.log(pari); // Output: [2, 4, 6]

Quando usarlo

• Creare subset di dati: Se hai un array di oggetti utenti e vuoi estrarre solo quelli attivi, .filter() è la scelta giusta.
• Esempio reale: Filtrare prodotti disponibili in stock o utenti con un determinato ruolo in un database locale.

3. .reduce()

Cosa fa

Esegue una funzione “accumulatrice” su ogni elemento dell’array, restituendo un singolo valore (numero, stringa, oggetto, ecc.).

const numeri = [1, 2, 3, 4];
const somma = numeri.reduce((acc, num) => acc + num, 0);
console.log(somma); // Output: 10

Quando usarlo

• Calcoli aggregati: Sia che tu debba sommare valori numerici, concatenare stringhe o costruire un oggetto cumulando dati, .reduce() è utilissimo.
• Esempio reale: Calcolare il totale di un carrello e-commerce, raggruppare dati in base a determinate chiavi.

4. .find()

Cosa fa

Restituisce il primo elemento che soddisfa una determinata condizione. Se nessun elemento la soddisfa, restituisce undefined.

const utenti = [
  { id: 1, nome: 'Mario' },
  { id: 2, nome: 'Luigi' },
  { id: 3, nome: 'Anna' }
];
const utenteConId2 = utenti.find(utente => utente.id === 2);
console.log(utenteConId2); // Output: { id: 2, nome: 'Luigi' }

Quando usarlo

• Ricerca semplice: Ottimo per trovare rapidamente un elemento specifico (ad es. in base a un ID) senza ciclare manualmente l’array.
• Esempio reale: Cercare un singolo prodotto in un elenco, trovare l’utente loggato, ecc.

5. .forEach()

Cosa fa

Esegue una funzione per ogni elemento dell’array, senza restituire nulla.

const numeri = [1, 2, 3, 4];
numeri.forEach(num => {
  console.log(num); 
});

Quando usarlo

• Iterazioni “one by one”: Se vuoi semplicemente eseguire operazioni su ogni elemento (come stamparli in console, aggiornarli nel DOM o inviarli a un servizio), .forEach() è immediato.
• Esempio reale: Mostrare una lista di prodotti in console, applicare uno stile a ciascun elemento HTML corrispondente.

Confronto rapido tra i metodi

Consiglio: Se vuoi approfondire le basi di JavaScript, consulta la Guida Completa a JavaScript per Principianti o dai un’occhiata alla differenza tra var, let e const per un codice più ordinato.

Fonti Esterne e Link Utili

• Documentazione MDN Array: Consulta MDN per Array
• Guida ES6: Scopri le novità di ES6

Inoltre, per approfondire le basi e le best practice di JavaScript, ti consigliamo di leggere anche la Guida Completa a JavaScript per Principianti.

• Cos’è il DOM e come manipolarlo in JavaScript
• LocalStorage in JavaScript: quando usarlo e perché è meglio dei cookie
• ES6+: Arrow functions vs funzioni classiche
• JavaScript Performance Optimization: Tecniche Avanzate

FAQ

Qual è la differenza tra .map() e .forEach()?

• .map() restituisce un nuovo array con i risultati della funzione applicata a ogni elemento.
• .forEach() non restituisce nulla: serve solo per eseguire operazioni su ogni elemento, senza creare un array di ritorno.

Posso combinare più metodi insieme?

Assolutamente! È comune, ad esempio, usare .filter() per isolare certi elementi, poi .map() per trasformarli e infine .reduce() per sintetizzare un risultato finale. Sfruttare più metodi in catena può rendere il codice più leggibile e modulare, senza mutare l’array originale.

Conclusione

Questi 5 metodi ti consentono di manipolare array in JavaScript in modo più elegante, efficiente e senza effetti collaterali sull’array di partenza. Che tu debba trasformare, filtrare, ridurre, trovare o semplicemente iterare i tuoi dati, adesso hai tutti gli strumenti per farlo nel modo giusto.

Vuoi approfondire JavaScript?
Seguici su Instagram e TikTok @cyberalchimista per mini tutorial, quiz e tips giornalieri!
Hai domande? Lascia un commento o condividi il tuo progetto con noi!