Introduzione
I cicli sono uno degli strumenti più utili in JavaScript quando devi ripetere un’operazione più volte. In questa guida non ci limiteremo a vedere la sintassi base di for, while e do...while, ma li useremo in un caso pratico molto comune: validare una sequenza di input e ripetere i tentativi finché i dati non sono corretti.
Questo scenario è utile in molte situazioni reali: compilazione di form, inserimento di password, controllo di valori numerici, gestione di menù testuali o verifica di dati provenienti da un array. Sapere scegliere il ciclo giusto ti aiuta a scrivere codice più leggibile, robusto e facile da mantenere.
Il sotto-argomento che approfondiamo qui è quindi: come usare i cicli per validare input e gestire ripetizioni controllate. È un tema pratico, spesso sottovalutato, ma fondamentale nello sviluppo JavaScript.
Codice completo
// Esempio: validazione di una lista di età inserite come stringhe
// Obiettivo:
// - scorrere i valori
// - ignorare quelli non validi
// - fermarsi quando troviamo un valore valido
// - ripetere una richiesta finché l´utente non inserisce un numero corretto
const inputAgeList = ["", "abc", "-2", "17", "24", " 31 ", "forty"];
// Funzione di supporto per verificare se un valore è un intero valido
function parseValidAge(value) {
const trimmed = value.trim();
const age = Number(trimmed);
if (trimmed === "") {
return null; // input vuoto
}
if (!Number.isInteger(age)) {
return null; // non è un intero
}
if (age <0 || age > 120) {
return null; // valore fuori range plausibile
}
return age;
}
// 1) FOR: scorre una lista di input e cerca il primo valore valido
let firstValidAge = null;
for (let i = 0; i < inputAgeList.length; i++) {
const candidate = parseValidAge(inputAgeList[i]);
if (candidate !== null) {
firstValidAge = candidate;
break; // fermiamo il ciclo appena troviamo un dato corretto
}
}
console.log("Primo valore valido trovato con for:", firstValidAge);
// 2) WHILE: continua a controllare finché non trova un valore valido
let index = 0;
let lastValidAge = null;
while (index < inputAgeList.length && lastValidAge === null) {
const candidate = parseValidAge(inputAgeList[index]);
if (candidate !== null) {
lastValidAge = candidate;
} else {
index++;
}
}
console.log("Primo valore valido trovato con while:", lastValidAge);
// 3) DO...WHILE: esegue almeno una volta il blocco
// Simuliamo una richiesta ripetuta all´utente usando una lista di tentativi
const simulatedUserInputs = ["", " ", "200", "29"];
let attempt = 0;
let userAge = null;
do {
const currentInput = simulatedUserInputs[attempt];
userAge = parseValidAge(currentInput);
console.log(`Tentativo ${attempt + 1}:`, currentInput);
attempt++;
} while (userAge === null && attempt < simulatedUserInputs.length);
console.log("Età valida ottenuta con do...while:", userAge);
// 4) Esempio pratico: conteggio dei valori validi in un array
let validCount = 0;
for (let i = 0; i < inputAgeList.length; i++) {
if (parseValidAge(inputAgeList[i]) !== null) {
validCount++;
}
}
console.log("Numero di valori validi:", validCount);Spiegazione
Nel codice sopra abbiamo creato una funzione di utilità, parseValidAge, che riceve un valore e restituisce:
- un numero, se l’input è valido;
- null, se l’input non è accettabile.
Questa scelta è molto utile perché separa la logica di validazione dal ciclo. In pratica, il ciclo si occupa di iterare, mentre la funzione si occupa di decidere se un dato è valido.
1. Il ciclo for
Il ciclo for è perfetto quando sai quante volte devi iterare o quando stai scorrendo un array. Nel nostro esempio, attraversa la lista inputAgeList da sinistra a destra e si ferma appena trova il primo valore valido.
La riga più importante è:
if (candidate !== null) {
firstValidAge = candidate;
break;
}Qui usiamo break per interrompere il ciclo non appena abbiamo ottenuto il risultato desiderato. Questa è una pratica molto comune quando vuoi evitare iterazioni inutili.
2. Il ciclo while
Il ciclo while è adatto quando non sai a priori quante iterazioni serviranno. Nel nostro esempio, continuiamo a controllare gli elementi finché non troviamo un valore valido oppure finché non finisce l’array.
La condizione del ciclo è:
while (index < inputAgeList.length && lastValidAge === null)Questo significa: “continua finché ci sono elementi da leggere e non abbiamo ancora trovato un valore valido”.
Il vantaggio di while è la sua flessibilità. Lo svantaggio è che devi gestire manualmente l’indice, quindi è più facile commettere errori se dimentichi di incrementarlo.
3. Il ciclo do...while
Il ciclo do...while è ideale quando vuoi eseguire il blocco almeno una volta. È molto utile per simulare o implementare una richiesta ripetuta all’utente.
Nel nostro esempio, proviamo a leggere più input finché non otteniamo un’età valida. La differenza rispetto a while è importante: con do...while il corpo viene eseguito prima del controllo.
do {
const currentInput = simulatedUserInputs[attempt];
userAge = parseValidAge(currentInput);
attempt++;
} while (userAge === null && attempt < simulatedUserInputs.length);Questo pattern è molto comune in scenari interattivi: chiedi un dato, lo validi, e se non è corretto chiedi di nuovo.
4. Conteggio dei valori validi
L’ultimo esempio mostra un uso classico del ciclo for: contare gli elementi che soddisfano una condizione. Qui incrementiamo validCount solo quando la funzione di validazione restituisce un valore diverso da null.
Questo tipo di logica è utile per analizzare dati in input, filtrare record o preparare informazioni da mostrare in interfaccia.
Best practice
- Scegli il ciclo in base al problema: usa for per array e conteggi noti, while per condizioni dinamiche, do...while quando il blocco deve girare almeno una volta.
- Separa la validazione dalla logica del ciclo: una funzione dedicata rende il codice più chiaro e riutilizzabile.
- Usa break con criterio: interrompere il ciclo appena trovi il risultato evita lavoro inutile e migliora le prestazioni.
- Aggiorna sempre l’indice nei while: se dimentichi index++, rischi un ciclo infinito.
- Proteggi i dati in ingresso: controlla spazi vuoti, conversioni numeriche e range plausibili prima di usare un valore.
- Preferisci condizioni semplici e leggibili: una condizione troppo complessa rende il ciclo difficile da mantenere e debuggare.
Riepilogo
In questo tutorial abbiamo visto come for, while e do...while possano essere usati in modo pratico per gestire validazione e ripetizione dei tentativi. Il punto chiave non è solo conoscere la sintassi, ma capire quando usare ciascun ciclo.
- for: perfetto per scorrere array e fermarsi con break quando hai trovato ciò che cerchi.
- while: utile quando la ripetizione dipende da una condizione che può cambiare durante l’esecuzione.
- do...while: ideale per input interattivi, perché esegue almeno un tentativo.
Se impari a combinare cicli e funzioni di validazione, il tuo codice diventa subito più solido e professionale. È una competenza fondamentale per costruire form affidabili, flussi guidati e piccoli strumenti di controllo dati.
Approfondisci con risorse ufficiali
- MDN Web Docs - for statement: documentazione completa sul ciclo for in JavaScript.
- MDN Web Docs - while statement: guida ufficiale al ciclo while.
- MDN Web Docs - do...while statement: spiegazione dettagliata del ciclo do...while.
- MDN Web Docs - Number: utile per comprendere conversioni e validazione numerica.
- MDN Web Docs - Number.isInteger(): metodo fondamentale per verificare se un valore è un intero.