Introduzione
Gli Array in JavaScript sono una delle strutture dati più usate in assoluto. Servono per conservare liste ordinate di elementi: prodotti in un carrello, utenti registrati, task da completare, risultati di una ricerca e molto altro. Saperli creare, leggere, modificare e attraversare in modo corretto è fondamentale per scrivere codice pulito e prevedibile.
In questo tutorial ci concentriamo su un sotto-argomento molto pratico: come combinare creazione, metodi e iterazioni degli Array per filtrare, trasformare e ordinare dati reali. Non ci limiteremo a usare i metodi uno per uno, ma vedremo come costruire un flusso di lavoro tipico da applicazione web: partire da un array di dati, selezionare gli elementi utili, trasformarli e ordinarli per mostrare il risultato finale all’utente.
Questo approccio è utile in moltissimi contesti: dashboard, e-commerce, gestione di liste, report, API client e interfacce dinamiche. L’obiettivo è imparare a usare gli Array non solo come contenitori, ma come strumenti per elaborare dati in modo elegante.
Codice completo
// Esempio: gestione di una lista di prodotti in un negozio online
// 1. Creazione dell´array
const prodotti = [
{ id: 1, nome: "Notebook", categoria: "elettronica", prezzo: 899, disponibile: true },
{ id: 2, nome: "Mouse", categoria: "elettronica", prezzo: 25, disponibile: true },
{ id: 3, nome: "Tavolo", categoria: "arredamento", prezzo: 150, disponibile: false },
{ id: 4, nome: "Lampada", categoria: "arredamento", prezzo: 45, disponibile: true },
{ id: 5, nome: "Cuffie", categoria: "elettronica", prezzo: 79, disponibile: false },
{ id: 6, nome: "Sedia", categoria: "arredamento", prezzo: 95, disponibile: true }
];
// 2. Creazione di un nuovo array con i prodotti disponibili
const disponibili = prodotti.filter(prodotto => prodotto.disponibile);
// 3. Selezione dei prodotti elettronici
const elettronica = disponibili.filter(prodotto => prodotto.categoria === "elettronica");
// 4. Trasformazione dei dati: creiamo una lista di stringhe leggibili
const etichette = elettronica.map(prodotto => `${prodotto.nome} - €${prodotto.prezzo}`);
// 5. Ordinamento per prezzo crescente
const ordinatiPerPrezzo = [...elettronica].sort((a, b) => a.prezzo - b.prezzo);
// 6. Iterazione con forEach per stampare il risultato finale
ordinatiPerPrezzo.forEach(prodotto => {
console.log(`Prodotto: ${prodotto.nome}, Prezzo: €${prodotto.prezzo}`);
});
// 7. Uso di some per verificare se esiste almeno un prodotto economico
const haProdottiEconomici = prodotti.some(prodotto => prodotto.prezzo < 50);
// 8. Uso di every per verificare se tutti i prodotti disponibili hanno un prezzo positivo
const tuttiPrezziValidi = prodotti.every(prodotto => prodotto.prezzo > 0);
// 9. Creazione di un array di nomi usando map
const nomiProdotti = prodotti.map(prodotto => prodotto.nome);
// 10. Esempio di iterazione con for...of
for (const prodotto of prodotti) {
if (prodotto.disponibile) {
console.log(`Disponibile: ${prodotto.nome}`);
}
}Spiegazione
Vediamo con calma cosa succede nel codice. L’array prodotti contiene oggetti, cioè elementi con più proprietà. Questa è una struttura molto comune nelle applicazioni reali perché un semplice elenco di valori non basta quasi mai: ogni elemento ha un nome, un prezzo, una categoria e uno stato di disponibilità.
Creazione dell’array
La creazione avviene tramite la notazione letterale [ ]. È il modo più semplice e leggibile per inizializzare una lista. In alternativa si possono usare anche costruttori o metodi come Array.from(), ma nella pratica quotidiana la notazione letterale è la più usata.
filter: selezionare elementi
Il metodo filter() crea un nuovo array contenente solo gli elementi che soddisfano una certa condizione. Nel nostro esempio prima selezioniamo i prodotti disponibili e poi, tra questi, prendiamo solo quelli della categoria elettronica.
Questo è molto utile perché non modifica l’array originale: il dato iniziale resta intatto, e il risultato viene salvato in una nuova variabile. È una buona pratica importante quando si lavora con dati che non devono essere alterati direttamente.
map: trasformare i dati
Il metodo map() serve per trasformare ogni elemento dell’array in un nuovo valore. Nel nostro esempio convertiamo gli oggetti prodotto in stringhe più leggibili, come "Notebook - €899". Questo tipo di trasformazione è perfetto quando devi preparare i dati per la visualizzazione in pagina o per un report.
sort: ordinare gli elementi
Il metodo sort() ordina l’array in base a una funzione di confronto. Attenzione: sort() modifica l’array originale, quindi nel codice abbiamo creato una copia con [...elettronica] prima di ordinare. Questo evita effetti collaterali indesiderati.
Nel confronto (a, b) => a.prezzo - b.prezzo, il risultato numerico determina l’ordine crescente. Se il valore è negativo, a viene prima di b; se è positivo, succede il contrario.
forEach e for...of: iterare sugli array
forEach() è perfetto quando vuoi eseguire un’azione per ogni elemento, ad esempio stampare informazioni o aggiornare il DOM. Non restituisce un nuovo array, quindi è adatto per effetti collaterali controllati.
for...of è invece una sintassi molto leggibile per ciclare su un array. È spesso preferibile quando vuoi scrivere codice semplice e diretto, soprattutto in blocchi con condizioni interne.
some ed every: controlli rapidi
some() verifica se almeno un elemento soddisfa una condizione. Nel tutorial controlliamo se esiste almeno un prodotto economico, cioè con prezzo inferiore a 50.
every() controlla invece se tutti gli elementi rispettano una condizione. Qui usiamo il metodo per verificare che tutti i prezzi siano positivi. Sono metodi molto utili per validazione e controllo dei dati.
Best practice
- Non modificare l’array originale se non è necessario: usa metodi come
filter(),map()e copie con spread[...array]quando vuoi preservare i dati di partenza. - Usa nomi di variabili descrittivi:
disponibili,elettronica,ordinatiPerPrezzorendono il codice più chiaro rispetto a nomi generici. - Evita di concatenare troppi passaggi in una sola riga se il codice diventa difficile da leggere. Separare le trasformazioni aiuta nella manutenzione.
- Ricorda che sort modifica l’array: se vuoi mantenere intatto il dato originale, crea una copia prima di ordinare.
- Scegli il metodo giusto per il compito giusto:
map()per trasformare,filter()per selezionare,forEach()per eseguire azioni,some()edevery()per verifiche. - Preferisci funzioni pure quando possibile: rendono il comportamento più prevedibile e il debug più semplice.
- Usa i commenti per spiegare il perché, non l’ovvio: il codice dovrebbe già mostrare cosa fa; i commenti dovrebbero chiarire la logica o la scelta progettuale.
Riepilogo
In questo tutorial abbiamo visto come lavorare con gli Array in JavaScript in modo pratico e professionale. Abbiamo creato un array di oggetti, filtrato i dati con filter(), trasformato i risultati con map(), ordinato gli elementi con sort() e attraversato la lista con forEach() e for...of.
Abbiamo anche introdotto due metodi molto utili per i controlli logici: some() ed every(). Insieme, questi strumenti coprono gran parte delle operazioni quotidiane che si fanno sugli array in un progetto JavaScript reale.
La vera forza degli Array non sta solo nel contenere dati, ma nel permettere di elaborarli con una pipeline chiara: crea, seleziona, trasforma, ordina, verifica. Se impari a usare bene questi passaggi, il tuo codice sarà più leggibile, più robusto e più facile da mantenere.
Approfondisci con risorse ufficiali
- MDN Web Docs - Array: documentazione completa sui metodi degli array in JavaScript.
- MDN Web Docs - filter(): approfondimento sul filtraggio degli elementi.
- MDN Web Docs - map(): guida alla trasformazione degli array.
- MDN Web Docs - sort(): dettagli sul comportamento dell’ordinamento.
- MDN Web Docs - some() ed every(): uso dei metodi di verifica.
- ECMAScript Specification: riferimento formale per il comportamento standard di JavaScript.