Array

Bentornato.

Nella lezione precedente hai imparato le funzioni.

Le funzioni aiutano a riutilizzare il codice, organizzare la logica ed evitare la zuppa di copia-incolla.

Molto utile.

Molto civile.

Oggi passiamo a un altro concetto importante di JavaScript.

Gli array.

Un array è una lista di valori.

Invece di creare tante variabili separate, puoi salvare tanti valori dentro una sola variabile.

Senza array, il codice diventa così:

const studente1 = "Anna";
const studente2 = "Marco";
const studente3 = "Luca";
const studente4 = "Sofia";

Funziona.

Ma non è bellissimo.

È come portare una patata in ogni tasca invece di usare una borsa.

Con gli array possiamo scrivere:

const studenti = ["Anna", "Marco", "Luca", "Sofia"];

Molto meglio.

Una variabile.

Tanti valori.

Meno caos.

JavaScript sta lentamente imparando a mettere in ordine la sua camera.

Quasi.

Cosa Imparerai

In questa lezione imparerai:

che cosa sono gli array;
come creare un array;
come funzionano gli indici;
come accedere agli elementi di un array;
come modificare gli elementi;
come aggiungere elementi con push;
come rimuovere elementi con pop;
come controllare la lunghezza di un array;
come scorrere un array con un ciclo;
come usare gli array con il DOM;
come costruire una piccola lista di attività.

Alla fine di questa lezione capirai come JavaScript salva liste di dati.

Questo è un grande passo.

Perché i siti reali sono pieni di liste.

Prodotti.

Utenti.

Articoli del blog.

Elementi del menu.

Commenti.

Attività.

Foto.

Tutto è una lista se lo guardi abbastanza a lungo.

Un po’ filosofico.

Ma sempre JavaScript.

Che Cos'è un Array?

Un array è una variabile speciale che può salvare più valori.

Esempio:

const frutti = ["mela", "banana", "arancia"];

Qui abbiamo una variabile:

frutti

Dentro ci sono tre valori:

mela
banana
arancia

Un array usa le parentesi quadre:

[]

Ogni valore è separato da una virgola.

Esempio:

const numeri = [10, 20, 30, 40];
const nomi = ["Anna", "Marco", "Viktor"];
const misto = ["JavaScript", 2026, true];

Un array può contenere stringhe, numeri, booleani e altri valori.

Ma di solito teniamo insieme dati simili.

Così:

const prodotti = ["Laptop", "Mouse", "Tastiera"];

Non così:

const arrayStrano = ["Pizza", 42, false, "Un pinguino confuso"];

JavaScript lo permette.

Ma solo perché puoi fare una cosa non significa che dovresti farla.

Lezione di vita molto importante.

E anche di programmazione.

Crea il Progetto

Crea una cartella per questa lezione:

mkdir javascript-lesson5
cd javascript-lesson5
touch index.html
touch script.js

Il progetto dovrebbe essere così:

javascript-lesson5/
  index.html
  script.js

Apri la cartella nel tuo editor.

Inizieremo dalla console.

Poi useremo gli array per aggiornare una pagina web.

Nessun drago framework oggi.

Solo JavaScript.

Ancora pericoloso.

Ma gestibile.

Scrivi l'HTML

Apri index.html e aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Array</title>
</head>
<body>
  <h1>Array</h1>
  <p>Apri la console del browser per vedere l&apos;output di JavaScript.</p>

  <script src="script.js"></script>
</body>
</html>

Apri il file nel browser.

Apri la console:

clic destro sulla pagina;
scegli Ispeziona;
apri la scheda Console.

Ora JavaScript è pronto.

La console osserva.

Di nuovo.

Non dorme mai.

Il Tuo Primo Array

Apri script.js e aggiungi:

const frutti = ["mela", "banana", "arancia"];

console.log(frutti);

Aggiorna il browser.

Dovresti vedere:

["mela", "banana", "arancia"]

Complimenti.

Hai creato il tuo primo array.

Sembra una cosa semplice.

Ma questo piccolo oggetto è uno degli strumenti più importanti in JavaScript.

Una variabile salva un valore.

Un array salva tanti valori.

Questa è la differenza.

Piccole parentesi.

Grande potere.

Gli Indici degli Array

Ogni elemento in un array ha una posizione.

Questa posizione si chiama indice.

Importante:

JavaScript comincia a contare da zero.

Non da uno.

Da zero.

Perché i programmatori hanno guardato il modo normale di contare e hanno detto:

“No. Troppo comodo.”

Esempio:

const frutti = ["mela", "banana", "arancia"];

console.log(frutti[0]);
console.log(frutti[1]);
console.log(frutti[2]);

Output:

mela
banana
arancia

La struttura è questa:

Indice 0 -> mela
Indice 1 -> banana
Indice 2 -> arancia

Quindi il primo elemento è:

frutti[0]

Non:

frutti[1]

Questo è uno degli errori più comuni all’inizio.

Non preoccuparti.

Lo fanno tutti.

Poi tutti soffrono.

Poi tutti ricordano.

È il percorso naturale della saggezza JavaScript.

Accedere agli Elementi dell'Array

Puoi accedere a qualsiasi elemento usando il suo indice.

Esempio:

const linguaggi = ["HTML", "CSS", "JavaScript"];

console.log(linguaggi[0]);
console.log(linguaggi[1]);
console.log(linguaggi[2]);

Output:

HTML
CSS
JavaScript

Se provi ad accedere a un indice che non esiste:

console.log(linguaggi[5]);

Output:

undefined

Perché?

Perché non c’è nessun elemento all’indice 5.

JavaScript non va in panico.

Dice semplicemente:

undefined

Che significa:

“Qui non ho trovato niente, amico mio.”

Molto calmo.

Forse troppo calmo.

Modificare gli Elementi dell'Array

Puoi modificare un elemento dentro un array.

Esempio:

const frutti = ["mela", "banana", "arancia"];

frutti[1] = "kiwi";

console.log(frutti);

Output:

["mela", "kiwi", "arancia"]

L’elemento all’indice 1 è stato modificato.

Prima:

banana

Dopo:

kiwi

La banana ha lasciato l’edificio.

Nessuna spiegazione.

Nessun saluto.

Solo JavaScript.

Aggiungere Elementi con push

Per aggiungere un elemento alla fine di un array, usiamo push.

Esempio:

const frutti = ["mela", "banana"];

frutti.push("arancia");

console.log(frutti);

Output:

["mela", "banana", "arancia"]

push aggiunge un nuovo elemento alla fine.

Altro esempio:

const attivita = ["studiare JavaScript", "bere caffè"];

attivita.push("costruire un sito");

console.log(attivita);

Output:

["studiare JavaScript", "bere caffè", "costruire un sito"]

Questo è utile quando l’utente aggiunge qualcosa.

Una nuova attività.

Un nuovo prodotto.

Un nuovo messaggio.

Un nuovo problema.

Soprattutto l’ultimo.

Lo sviluppo web ama i nuovi problemi.

Rimuovere Elementi con pop

Per rimuovere l’ultimo elemento da un array, usiamo pop.

Esempio:

const frutti = ["mela", "banana", "arancia"];

frutti.pop();

console.log(frutti);

Output:

["mela", "banana"]

pop rimuove l’ultimo elemento.

Può anche restituire l’elemento rimosso:

const frutti = ["mela", "banana", "arancia"];

const fruttoRimosso = frutti.pop();

console.log(fruttoRimosso);
console.log(frutti);

Output:

arancia
["mela", "banana"]

L’arancia è stata rimossa.

Ma l’abbiamo salvata in una variabile.

Molto drammatico.

Molto organizzato.

Lunghezza dell'Array

Per controllare quanti elementi ci sono in un array, usiamo .length.

Esempio:

const frutti = ["mela", "banana", "arancia"];

console.log(frutti.length);

Output:

Questo ci dice che l’array ha tre elementi.

Altro esempio:

const studenti = ["Anna", "Marco", "Luca", "Sofia"];

console.log(`Ci sono ${studenti.length} studenti.`);

Output:

Ci sono 4 studenti.

.length è molto utile.

Soprattutto quando dobbiamo scorrere gli array con i cicli.

E sì.

I cicli stanno arrivando.

Non scappare.

Sono amichevoli.

Più o meno.

Scorrere un Array

Immagina di avere questo array:

const frutti = ["mela", "banana", "arancia"];

Potremmo stampare ogni elemento manualmente:

console.log(frutti[0]);
console.log(frutti[1]);
console.log(frutti[2]);

Funziona.

Ma non è flessibile.

E se abbiamo 100 elementi?

Scriviamo 100 console.log?

No.

Abbiamo una dignità.

Usiamo un ciclo.

Esempio:

const frutti = ["mela", "banana", "arancia"];

for (let i = 0; i < frutti.length; i++) {
  console.log(frutti[i]);
}

Output:

mela
banana
arancia

Come funziona?

let i = 0

Partiamo dall’indice 0.

i < frutti.length

Continuiamo finché i è minore della lunghezza dell’array.

i++

Aumentiamo i dopo ogni giro.

Poi:

frutti[i]

prende l’elemento corrente.

Questo è uno schema molto comune in JavaScript.

Lo vedrai ovunque.

Come la polvere.

Ma polvere utile.

Il Ciclo for...of

Esiste anche un modo più semplice per scorrere gli array.

Esempio:

const frutti = ["mela", "banana", "arancia"];

for (const frutto of frutti) {
  console.log(frutto);
}

Output:

mela
banana
arancia

Questo si chiama ciclo for...of.

È pulito e facile da leggere.

Usalo quando vuoi ottenere direttamente ogni elemento.

Esempio:

const nomi = ["Anna", "Marco", "Viktor"];

for (const nome of nomi) {
  console.log(`Ciao, ${nome}!`);
}

Output:

Ciao, Anna!
Ciao, Marco!
Ciao, Viktor!

Molto bello.

Molto leggibile.

Nessun dramma con gli indici.

for o for...of?

Usa un ciclo for normale quando ti serve l’indice.

Esempio:

const prodotti = ["Laptop", "Mouse", "Tastiera"];

for (let i = 0; i < prodotti.length; i++) {
  console.log(`${i}: ${prodotti[i]}`);
}

Output:

0: Laptop
1: Mouse
2: Tastiera

Usa for...of quando ti serve solo il valore.

Esempio:

const prodotti = ["Laptop", "Mouse", "Tastiera"];

for (const prodotto of prodotti) {
  console.log(prodotto);
}

Output:

Laptop
Mouse
Tastiera

Regola semplice:

Se ti serve l’indice, usa for.

Se ti serve solo l’elemento, usa for...of.

JavaScript ti dà scelte.

A volte troppe.

Ma queste due sono utili.

Array e Condizioni

Puoi usare condizioni dentro i cicli.

Esempio:

const prezzi = [10, 25, 50, 5, 100];

for (const prezzo of prezzi) {
  if (prezzo > 20) {
    console.log(`Articolo costoso: €${prezzo}`);
  }
}

Output:

Articolo costoso: €25
Articolo costoso: €50
Articolo costoso: €100

Questo è potente.

Puoi filtrare dati.

Puoi trovare elementi importanti.

Puoi controllare regole.

Esempio:

const eta = [12, 18, 25, 16, 40];

for (const valore of eta) {
  if (valore >= 18) {
    console.log(`${valore} può entrare.`);
  } else {
    console.log(`${valore} non può entrare.`);
  }
}

Output:

12 non può entrare.
18 può entrare.
25 può entrare.
16 non può entrare.
40 può entrare.

Gli array salvano i dati.

I cicli attraversano i dati.

Le condizioni prendono decisioni.

Ora JavaScript sta diventando un piccolo impiegato d’ufficio.

Un po’ stanco.

Ma produttivo.

Array e Funzioni

Gli array funzionano molto bene con le funzioni.

Esempio:

function mostraProdotti(prodotti) {
  for (const prodotto of prodotti) {
    console.log(prodotto);
  }
}

const prodotti = ["Laptop", "Mouse", "Tastiera"];

mostraProdotti(prodotti);

Output:

Laptop
Mouse
Tastiera

Qui la funzione riceve un array.

Poi lo scorre con un ciclo.

Questo è molto comune nei progetti reali.

Altro esempio:

function contaElementi(elementi) {
  return elementi.length;
}

const attivita = ["studiare", "praticare", "costruire"];

console.log(contaElementi(attivita));

Output:

Funzioni e array sono buoni amici.

Le funzioni fanno azioni.

Gli array conservano dati.

Insieme sono pericolosi.

In senso buono.

Più o meno.

Costruire una Lista di Attività

Ora costruiamo una piccola pagina che mostra una lista di attività.

Aggiorna index.html:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Array</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border: 2px solid #e5e7eb;
      border-radius: 18px;
    }

    h1 {
      font-size: 42px;
    }

    p,
    li {
      font-size: 20px;
      line-height: 1.6;
    }

    ul {
      padding-left: 24px;
    }

    li {
      margin-bottom: 10px;
    }

    .count {
      font-weight: 700;
      color: #2563eb;
    }
  </style>
</head>
<body>
  <h1>Array</h1>

  <div class="card">
    <h2>Attività di Oggi</h2>
    <p id="taskCount" class="count"></p>
    <ul id="taskList"></ul>
  </div>

  <script src="script.js"></script>
</body>
</html>

Ora aggiorna script.js:

const attivita = [
  "Imparare gli array",
  "Praticare i cicli",
  "Costruire un piccolo progetto",
  "Bere caffè"
];

const taskListElement = document.getElementById("taskList");
const taskCountElement = document.getElementById("taskCount");

function mostraNumeroAttivita(attivita) {
  taskCountElement.textContent = `Hai ${attivita.length} attività oggi.`;
}

function mostraAttivita(attivita) {
  for (const task of attivita) {
    const listItem = document.createElement("li");
    listItem.textContent = task;
    taskListElement.appendChild(listItem);
  }
}

mostraNumeroAttivita(attivita);
mostraAttivita(attivita);

Aggiorna il browser.

Dovresti vedere una lista di attività nella pagina.

JavaScript ha preso l’array e ha creato elementi HTML.

Questo è importante.

Molto importante.

Perché molti siti reali funzionano esattamente così:

prendono dati;
salvano dati in un array;
scorrono l’array;
creano HTML;
mostrano tutto all’utente.

Questa non è solo teoria.

Questo è sviluppo web reale.

Piccolo.

Semplice.

Ma reale.

Il browser non è più una patata decorativa.

Sta lavorando.

Come Funziona Questo Codice

Questo array salva le attività:

const attivita = [
  "Imparare gli array",
  "Praticare i cicli",
  "Costruire un piccolo progetto",
  "Bere caffè"
];

Questo trova la lista nell’HTML:

const taskListElement = document.getElementById("taskList");

Questo trova il paragrafo per il numero di attività:

const taskCountElement = document.getElementById("taskCount");

Questa funzione mostra quante attività abbiamo:

function mostraNumeroAttivita(attivita) {
  taskCountElement.textContent = `Hai ${attivita.length} attività oggi.`;
}

Questa funzione crea gli elementi della lista:

function mostraAttivita(attivita) {
  for (const task of attivita) {
    const listItem = document.createElement("li");
    listItem.textContent = task;
    taskListElement.appendChild(listItem);
  }
}

Questo esegue entrambe le funzioni:

mostraNumeroAttivita(attivita);
mostraAttivita(attivita);

Nota una cosa importante.

L’array contiene i dati.

Le funzioni decidono cosa fare con i dati.

Questo mantiene il codice più pulito.

Non perfetto.

Ma più pulito.

La perfezione è sempre un po’ sospetta.

Errori Comuni

Dimenticare che gli Array Partono da Zero

Aspettativa sbagliata:

const frutti = ["mela", "banana", "arancia"];

console.log(frutti[1]);

Potresti aspettarti:

mela

Ma ottieni:

banana

Perché il primo elemento ha indice 0.

Corretto:

console.log(frutti[0]);

Output:

mela

JavaScript parte da zero.

Accettalo.

Bevi acqua.

Continua.

Usare un Indice che Non Esiste

Esempio:

const frutti = ["mela", "banana", "arancia"];

console.log(frutti[10]);

Output:

undefined

Non esiste nessun elemento all’indice 10.

JavaScript non è arrabbiato.

È semplicemente vuoto lì.

Come il frigo dopo mezzanotte.

Usare `<=` Invece di `<` in un Ciclo

Sbagliato:

const frutti = ["mela", "banana", "arancia"];

for (let i = 0; i <= frutti.length; i++) {
  console.log(frutti[i]);
}

Questo può stampare:

mela
banana
arancia
undefined

Perché?

Perché l’ultimo indice valido è 2.

Ma frutti.length è 3.

Corretto:

for (let i = 0; i < frutti.length; i++) {
  console.log(frutti[i]);
}

Usa <.

Non <=.

Simbolo piccolo.

Differenza grande.

Come dimenticare una vite in una sedia.

Dimenticare di Svuotare la Lista

Se esegui una funzione tante volte, può aggiungere gli stessi elementi ancora e ancora.

Esempio:

function mostraAttivita(attivita) {
  for (const task of attivita) {
    const listItem = document.createElement("li");
    listItem.textContent = task;
    taskListElement.appendChild(listItem);
  }
}

Se questa funzione viene eseguita due volte, le attività appaiono due volte.

Per evitarlo, svuota prima la lista:

function mostraAttivita(attivita) {
  taskListElement.innerHTML = "";

  for (const task of attivita) {
    const listItem = document.createElement("li");
    listItem.textContent = task;
    taskListElement.appendChild(listItem);
  }
}

Questo rimuove il vecchio contenuto prima di aggiungere quello nuovo.

Molto utile.

Soprattutto quando la pagina inizia a duplicare elementi come una stampante impazzita.

Pratica

Crea un array chiamato linguaggiPreferiti.

Deve contenere almeno tre linguaggi di programmazione.

Esempio:

const linguaggiPreferiti = ["JavaScript", "Python", "Java"];

Stampa ogni linguaggio usando un ciclo for...of.

Esempio:

for (const linguaggio of linguaggiPreferiti) {
  console.log(linguaggio);
}

Poi crea un array chiamato punteggi.

Esempio:

const punteggi = [10, 25, 8, 40, 15];

Stampa solo i punteggi maggiori di 20.

Esempio:

for (const punteggio of punteggi) {
  if (punteggio > 20) {
    console.log(punteggio);
  }
}

Esegui il codice.

Cambia i valori.

Rompilo.

Aggiustalo.

È ancora il modo migliore per imparare.

JavaScript ama la pratica.

E a volte il sacrificio.

Soprattutto la pratica.

Mini Challenge

Costruisci una piccola pagina con:

un titolo;
un paragrafo che mostra quanti elementi ci sono in una lista;
un <ul> vuoto;
un array di prodotti;
una funzione che mostra tutti i prodotti nella pagina.

Array di esempio:

const prodotti = [
  "Laptop",
  "Mouse",
  "Tastiera",
  "Monitor"
];

Crea una funzione:

function mostraProdotti(prodotti) {
  // crea gli elementi della lista qui
}

Bonus:

Aggiungi un’altra funzione chiamata mostraNumeroProdotti.

Deve mostrare questo messaggio:

Ci sono 4 prodotti.

Usa:

prodotti.length

Questa sfida è molto vicina allo sviluppo web reale.

Hai dei dati.

Mostri i dati.

Tieni la logica dentro le funzioni.

Così evitiamo gli spaghetti.

O almeno cuciniamo spaghetti migliori.

Riepilogo

Oggi hai imparato:

gli array salvano più valori;
gli array usano parentesi quadre;
ogni elemento ha un indice;
gli indici in JavaScript partono da zero;
puoi accedere agli elementi con gli indici;
puoi modificare elementi dell’array;
push aggiunge un elemento alla fine;
pop rimuove l’ultimo elemento;
.length mostra quanti elementi ci sono;
i cicli possono scorrere gli array;
for...of è un modo pulito per leggere gli elementi;
gli array funzionano bene con le funzioni;
gli array possono essere usati per creare elementi HTML dinamicamente.

Questo è un grande passo.

Gli array sono ovunque in JavaScript.

Quando vedi una lista di prodotti, articoli, utenti, attività, commenti o foto, probabilmente dietro c’è un array.

Che lavora in silenzio.

Probabilmente stanco.

Ma utile.

Prossima Lezione

Nella prossima lezione impareremo gli oggetti.

Gli oggetti aiutano a salvare dati strutturati.

Perché a volte questo non basta:

const user = "Viktor";

A volte serve questo:

const user = {
  name: "Viktor",
  age: 33,
  role: "Developer"
};

Gli array sono per le liste.

Gli oggetti sono per i dettagli.

Insieme sono ovunque.

JavaScript sta diventando serio adesso.

Ancora strano.

Ma serio.

Array

Cosa Imparerai

Che Cos'è un Array?

Crea il Progetto

Scrivi l'HTML

Il Tuo Primo Array

Gli Indici degli Array

Accedere agli Elementi dell'Array

Modificare gli Elementi dell'Array

Aggiungere Elementi con push

Rimuovere Elementi con pop

Lunghezza dell'Array

Scorrere un Array

Il Ciclo for...of

for o for...of?

Array e Condizioni

Array e Funzioni

Costruire una Lista di Attività

Come Funziona Questo Codice

Errori Comuni

Dimenticare che gli Array Partono da Zero

Usare un Indice che Non Esiste

Usare <= Invece di < in un Ciclo

Dimenticare di Svuotare la Lista

Pratica

Mini Challenge

Riepilogo

Prossima Lezione

Usare `<=` Invece di `<` in un Ciclo