Cicli in JavaScript per elaborare liste dinamiche: for, while e do...while

Introduzione

I cicli sono uno degli strumenti più importanti in JavaScript quando devi ripetere un’operazione più volte senza scrivere codice duplicato. In questo tutorial vedremo un caso pratico e molto utile: elaborare una lista dinamica di elementi, ad esempio una lista di prodotti, ordini, utenti o task, usando for, while e do...while.

Questo sotto-argomento è particolarmente utile perché nei progetti reali spesso non lavori con un numero fisso di elementi, ma con dati che cambiano: array ricevuti da un’API, risultati di una ricerca, elementi inseriti dall’utente o record caricati da un database. Saper scegliere il ciclo giusto ti aiuta a scrivere codice più leggibile, robusto e facile da mantenere.

Vedremo un esempio concreto: una piccola applicazione che analizza una lista di prodotti e calcola:

• il totale degli importi;
• quanti prodotti sono disponibili;
• quali prodotti superano una certa soglia di prezzo;
• come gestire correttamente una lista vuota.

Codice completo

// Lista di prodotti: scenario realistico in un e-commerce o gestionale
const prodotti = [
  { nome: "Tastiera meccanica", prezzo: 89.90, disponibile: true },
  { nome: "Mouse wireless", prezzo: 29.99, disponibile: true },
  { nome: "Monitor 27 pollici", prezzo: 249.00, disponibile: false },
  { nome: "Hub USB-C", prezzo: 39.50, disponibile: true },
  { nome: "Webcam HD", prezzo: 54.90, disponibile: false }
];

// 1) FOR: calcolare il totale dei prezzi
let totalePrezzi = 0;

for (let i = 0; i < prodotti.length; i++) {
  totalePrezzi += prodotti[i].prezzo;
}

console.log("Totale prezzi:", totalePrezzi.toFixed(2));

// 2) WHILE: contare i prodotti disponibili
let indice = 0;
let prodottiDisponibili = 0;

while (indice < prodotti.length) {
  if (prodotti[indice].disponibile) {
    prodottiDisponibili++;
  }
  indice++;
}

console.log("Prodotti disponibili:", prodottiDisponibili);

// 3) DO...WHILE: cercare il primo prodotto sopra una soglia
const sogliaPrezzo = 50;
let j = 0;
let trovato = null;

do {
  // Il ciclo esegue almeno una volta, utile anche se la lista è vuota
  if (prodotti[j] && prodotti[j].prezzo > sogliaPrezzo) {
    trovato = prodotti[j];
    break;
  }
  j++;
} while (j < prodotti.length);

if (trovato) {
  console.log("Primo prodotto sopra soglia:", trovato.nome, "-", trovato.prezzo);
} else {
  console.log("Nessun prodotto supera la soglia.");
}

// 4) FOR con break e continue: stampare solo i prodotti disponibili
for (let i = 0; i < prodotti.length; i++) {
  if (!prodotti[i].disponibile) {
    continue; // Salta i prodotti non disponibili
  }

  console.log("Disponibile:", prodotti[i].nome);
}

// 5) Gestione di una lista vuota con do...while
const listaVuota = [];
let k = 0;

do {
  if (listaVuota.length === 0) {
    console.log("La lista è vuota, nessun elemento da elaborare.");
    break;
  }

  console.log(listaVuota[k]);
  k++;
} while (k < listaVuota.length);

Spiegazione

Analizziamo il codice passo per passo per capire non solo come funziona, ma anche quando usare ogni ciclo.

1. Il ciclo for per attraversare una lista

Il ciclo for è perfetto quando conosci in anticipo quante volte devi iterare. Nel nostro esempio, la quantità di elementi dipende da prodotti.length, quindi il ciclo scorre l’array dall’indice 0 fino all’ultimo elemento.

Lo usiamo per sommare tutti i prezzi:

• inizializziamo totalePrezzi a 0;
• per ogni prodotto aggiungiamo il suo prezzo;
• alla fine otteniamo il totale complessivo.

Questa è una situazione molto comune: calcolo di totali, creazione di report, conteggi, trasformazioni elementari sui dati.

2. Il ciclo while per controllare una condizione

Il ciclo while è utile quando vuoi continuare finché una condizione rimane vera. Nel nostro esempio contiamo quanti prodotti sono disponibili.

Qui il ciclo parte con indice = 0 e avanza finché indice < prodotti.length. Ad ogni iterazione controlla se disponibile è true e, in caso positivo, incrementa il contatore.

Il vantaggio del while è che rende molto chiaro il concetto di “continua finché c’è ancora lavoro da fare”. È spesso usato quando il numero di iterazioni può dipendere da una condizione esterna, da dati dinamici o da input dell’utente.

3. Il ciclo do...while per eseguire almeno una volta

Il ciclo do...while è particolare perché esegue il blocco almeno una volta prima di controllare la condizione. Questo lo rende utile in scenari in cui vuoi fare un primo tentativo obbligatorio, come mostrare un menu, chiedere conferma o inizializzare una ricerca.

Nel nostro esempio cerchiamo il primo prodotto sopra una soglia di prezzo. Usiamo do...while perché vogliamo provare subito a controllare il primo elemento, senza aspettare il controllo iniziale del ciclo.

In più, abbiamo protetto l’accesso con prodotti[j] &&. Questo evita errori se l’indice supera la lunghezza dell’array. È una piccola ma importante forma di difesa nel codice reale.

4. break e continue

Nel quarto blocco usiamo continue per saltare i prodotti non disponibili. Questo è utile quando vuoi ignorare alcuni elementi senza interrompere tutto il ciclo.

Se invece vuoi fermare completamente l’iterazione appena trovi una condizione specifica, puoi usare break. Nel nostro esempio lo abbiamo usato nel do...while per uscire appena troviamo il primo prodotto sopra soglia.

5. Gestire una lista vuota

Un errore comune è dimenticare che un array può essere vuoto. Nel caso del do...while, questo è ancora più importante perché il blocco viene eseguito almeno una volta. Per questo nel codice abbiamo inserito un controllo esplicito su listaVuota.length === 0.

Questa attenzione evita comportamenti inattesi e rende il codice più sicuro.

Best practice

• Scegli il ciclo in base al problema: usa for quando devi attraversare un array, while quando la ripetizione dipende da una condizione, do...while quando serve almeno un’esecuzione.
• Evita indici fuori limite: prima di accedere a array[indice], verifica che l’elemento esista.
• Non complicare i cicli inutilmente: se il problema è semplice, mantieni il codice lineare e leggibile.
• Usa nomi chiari per le variabili: per esempio totalePrezzi, prodottiDisponibili, sogliaPrezzo.
• Controlla i casi limite: array vuoti, valori mancanti, elementi non validi.
• Usa break e continue con moderazione: sono utili, ma se abusati possono rendere il flusso difficile da seguire.

Riepilogo

I cicli for, while e do...while sono strumenti fondamentali per lavorare con dati dinamici in JavaScript. In questo tutorial abbiamo visto un caso pratico: elaborare una lista di prodotti per calcolare totali, contare elementi, cercare valori specifici e gestire liste vuote.

In sintesi:

• for è ideale per iterare su array e collezioni con numero di elementi noto;
• while è utile quando la ripetizione dipende da una condizione;
• do...while è perfetto quando il blocco deve eseguire almeno una volta.

Se impari a riconoscere il contesto giusto per ciascun ciclo, il tuo codice diventerà più chiaro, affidabile e professionale.

Approfondisci con risorse ufficiali

• MDN - for statement: documentazione completa sul ciclo for.
• MDN - while statement: guida ufficiale al ciclo while.
• MDN - do...while statement: spiegazione dettagliata del ciclo do...while.
• MDN - break: come interrompere un ciclo in modo controllato.
• MDN - continue: come saltare un’iterazione senza fermare il ciclo.