JavaScript Array: creare, leggere e trasformare i dati con i metodi giusti

Introduzione

Gli Array sono una delle strutture dati più usate in JavaScript. Servono per memorizzare collezioni di valori, come prodotti, attività, nomi, prezzi, log, risultati di ricerca e molto altro. Saperli creare e manipolare bene è fondamentale per scrivere codice pulito, leggibile e performante.

In questo tutorial vedremo un sotto-argomento molto pratico: come usare gli Array per gestire una lista di attività con scadenze, stato di completamento e priorità. È un caso reale che unisce creazione, metodi principali e iterazioni, mostrando come passare da dati grezzi a informazioni utili.

Lo scopo non è solo imparare la sintassi, ma capire quando usare un metodo e perché. Questo approccio ti aiuterà a evitare codice ripetitivo e a scegliere il metodo più adatto tra push, map, filter, find, some, every, for...of e altri strumenti utilissimi.

Codice completo

// Lista iniziale di attività
const tasks = [
  { id: 1, title: "Preparare la presentazione", done: false, priority: 2, dueDate: "2026-07-20" },
  { id: 2, title: "Rispondere alle email", done: true, priority: 3, dueDate: "2026-07-17" },
  { id: 3, title: "Scrivere documentazione", done: false, priority: 1, dueDate: "2026-07-19" },
];

// 1) Creazione di un nuovo array con push
tasks.push({
  id: 4,
  title: "Fare backup del progetto",
  done: false,
  priority: 2,
  dueDate: "2026-07-18",
});

// 2) Iterazione con for...of per leggere i dati
console.log("Elenco attività:");
for (const task of tasks) {
  console.log(`- ${task.title} | completata: ${task.done} | priorità: ${task.priority}`);
}

// 3) filter: attività non completate
const pendingTasks = tasks.filter(task => !task.done);

// 4) map: trasformare le attività in stringhe più leggibili
const taskLabels = tasks.map(task => {
  const status = task.done ? "✅" : "⏳";
  return `${status} ${task.title}`;
});

// 5) find: trovare la prima attività urgente
const urgentTask = tasks.find(task => task.priority === 1);

// 6) some: verificare se esiste almeno un´attività scaduta
const today = "2026-07-18";
const hasOverdueTask = tasks.some(task => task.dueDate < today && !task.done);

// 7) every: controllare se tutte le attività sono completate
const allDone = tasks.every(task => task.done);

// 8) reduce: contare le attività completate
const completedCount = tasks.reduce((count, task) => {
  return task.done ? count + 1 : count;
}, 0);

// 9) sort: ordinare per priorità crescente
const sortedByPriority = [...tasks].sort((a, b) => a.priority - b.priority);

// 10) Destructuring in iterazione
for (const { title, done } of tasks) {
  console.log(`${title} - ${done ? "completata" : "da fare"}`);
}

// Output finale utile
console.log("Attività non completate:", pendingTasks);
console.log("Etichette:", taskLabels);
console.log("Attività urgente:", urgentTask);
console.log("Ci sono attività scadute?", hasOverdueTask);
console.log("Tutte completate?", allDone);
console.log("Completate:", completedCount);
console.log("Ordinate per priorità:", sortedByPriority);

Spiegazione

Partiamo dalla base: un Array in JavaScript si crea con le parentesi quadre []. In questo esempio l’array contiene oggetti, perché ogni attività ha più informazioni: titolo, stato, priorità e scadenza. Questo è un uso molto comune nella vita reale, soprattutto in dashboard, gestionali e applicazioni web.

1. Creazione dell’array

La variabile tasks contiene una lista di oggetti. Ogni oggetto rappresenta un elemento dell’array. Questa struttura è ideale quando i dati sono correlati tra loro e devono essere letti o trasformati insieme.

2. Aggiungere elementi con push

push inserisce un nuovo elemento in fondo all’array. È utile quando ricevi nuovi dati, ad esempio da un form o da un’API. Nel codice aggiungiamo una nuova attività senza riscrivere l’intero array.

3. Iterare con for...of

Il ciclo for...of è perfetto per leggere gli elementi di un array in modo semplice e chiaro. Rispetto a un classico for, è più leggibile quando non ti servono gli indici.

4. Filtrare con filter

filter crea un nuovo array contenente solo gli elementi che rispettano una condizione. Nel nostro caso otteniamo le attività non completate. Questo metodo non modifica l’array originale, quindi è molto comodo per mantenere i dati immutabili.

5. Trasformare con map

map serve a trasformare ogni elemento dell’array in un nuovo valore. Qui convertiamo gli oggetti attività in stringhe leggibili, aggiungendo un’icona in base allo stato. È uno dei metodi più usati per preparare dati da mostrare in interfaccia.

6. Cercare un elemento con find

find restituisce il primo elemento che soddisfa una condizione. Nel codice cerchiamo la prima attività con priorità alta. Se non esiste, il risultato sarà undefined.

7. Verificare con some ed every

some controlla se almeno un elemento rispetta la condizione. È utile per rispondere a domande del tipo: “Esiste almeno un’attività scaduta?”

every invece verifica che tutti gli elementi rispettino la condizione. Nel nostro esempio controlliamo se tutte le attività sono completate.

8. Ridurre con reduce

reduce è molto potente quando vuoi ottenere un singolo valore da un array. Qui contiamo quante attività sono completate. Anche se l’esempio è semplice, il metodo è molto utile per somme, raggruppamenti e aggregazioni.

9. Ordinare con sort

sort ordina l’array, ma attenzione: modifica l’array originale. Per evitare effetti collaterali, nel codice usiamo [...tasks] per creare una copia prima di ordinare. Questa è una buona pratica importante.

10. Destructuring durante l’iterazione

Nel ciclo finale usiamo il destructuring per estrarre direttamente title e done da ogni oggetto. Questo rende il codice più compatto e leggibile, soprattutto quando gli oggetti hanno molte proprietà.

Best practice

• Preferisci metodi funzionali come map, filter e reduce quando vuoi creare nuovi array o derivare nuovi valori.
• Evita di modificare l’array originale se non è necessario. Usa copie con [...array] prima di operazioni distruttive come sort.
• Usa for...of per leggere gli elementi in modo semplice, soprattutto quando non ti serve l’indice.
• Scegli find per un solo elemento, filter per più elementi. È un errore comune usare filter quando basta find.
• Usa some e every per controlli logici, perché rendono il codice più espressivo di un ciclo manuale.
• Lavora con dati omogenei: se un array contiene oggetti, mantieni una struttura coerente per tutti gli elementi.
• Evita side effect nascosti: un metodo come sort o push cambia l’array, quindi usalo consapevolmente.

Riepilogo

Gli Array in JavaScript sono molto più di una semplice lista di valori. Con i metodi giusti puoi creare, leggere, cercare, filtrare, trasformare e ordinare i dati in modo efficace. In questo tutorial abbiamo visto un caso pratico con una lista di attività, utile per capire come combinare più metodi in un flusso di lavoro reale.

I concetti chiave da ricordare sono:

• push per aggiungere elementi
• for...of per iterare in modo chiaro
• filter per selezionare elementi
• map per trasformare i dati
• find per cercare un elemento
• some e every per controlli logici
• reduce per aggregare valori
• sort per ordinare, facendo attenzione alla mutazione

Se impari a scegliere il metodo giusto nel contesto giusto, il tuo codice diventerà più pulito, più facile da mantenere e molto più professionale.

Approfondisci con risorse ufficiali

• MDN Web Docs - Array: documentazione completa sui metodi degli array in JavaScript.
• MDN Web Docs - Array.prototype.map(): guida ufficiale all’uso di map.
• MDN Web Docs - Array.prototype.filter(): riferimento per filtrare gli elementi di un array.
• MDN Web Docs - Array.prototype.reduce(): spiegazione dettagliata di reduce.
• MDN Web Docs - Array.prototype.sort(): documentazione su ordinamento e comparatori.
• MDN Web Docs - Iteration protocols: utile per capire come funzionano le iterazioni in JavaScript.