Loop in JavaScript
Impara i loop JavaScript: for, while, do...while, for...in e for...of, con break e continue. Sintassi chiara, esempi eseguibili e insidie comuni.
Introduzione ai Loop in JavaScript
I loop in JavaScript sono un concetto fondamentale della programmazione che permette di eseguire blocchi di codice più volte. Questa guida fornisce una comprensione approfondita dei diversi tipi di loop in JavaScript, inclusa la loro sintassi e le applicazioni pratiche.
Cosa Sono i Loop in JavaScript?
Un loop esegue lo stesso blocco di codice ripetutamente finché una condizione rimane vera. Ogni passaggio attraverso il corpo è chiamato iterazione. I loop ti permettono di elaborare ogni elemento di una lista, ripetere un'azione un numero fisso di volte, o continuare finché uno stato non cambia — il tutto senza dover copiare e incollare il codice.
Perché Usare i Loop?
Senza i loop dovresti scrivere la stessa istruzione una volta per ogni ripetizione:
console.log(1);
console.log(2);
console.log(3);
// ...and so on for every numberUn loop comprime tutto questo in poche righe che funzionano per 3 numeri o per 3 milioni. Il risultato è un codice più breve, più facile da modificare e molto meno soggetto a errori.
Comprendere i Diversi Tipi di Loop
Esploriamo i vari loop disponibili in JavaScript, la loro sintassi e come usarli in modo efficace.
Il Loop while
Il loop while è il tipo di loop più semplice in JavaScript. Verifica la condizione prima di ogni iterazione e continua a eseguire finché quella condizione è vera. Usalo quando non sai in anticipo quante volte devi ripetere — ad esempio, leggere fino a raggiungere un marcatore di fine.
Sintassi:
while (condition) {
// code to be executed
}Esempio:
Il corpo deve alla fine rendere la condizione falsa. Se non lo fa mai, si crea un loop infinito che blocca la pagina. L'i++ di cui sopra è ciò che garantisce la fine del loop — dimenticarlo significa che i < 5 rimarrà vero per sempre.
Il Loop do...while
Il loop do...while verifica la sua condizione dopo ogni iterazione, quindi il corpo viene eseguito almeno una volta — anche se la condizione è falsa fin dall'inizio. Questo è utile per prompt o menu che devono essere mostrati almeno una volta prima di decidere se ripetere.
Sintassi:
do {
// code to be executed
} while (condition);Esempio:
Il Loop for
Il loop for è il loop più comunemente utilizzato. Racchiude tre parti in una sola riga: un'inizializzazione (eseguita una sola volta all'inizio), una condizione (verificata prima di ogni iterazione) e un'espressione finale (eseguita dopo ogni iterazione, solitamente per incrementare un contatore). È la scelta naturale quando sai quante volte vuoi ripetere.
Sintassi:
for (initialization; condition; finalExpression) {
// code to be executed
}Esempio:
Il Loop for...in
Questo loop itera sui nomi delle proprietà (chiavi) enumerabili di un object. Usalo quando hai bisogno delle chiavi di un object. Evitalo per gli array: restituisce indici come string ("0", "1", …), non garantisce l'ordine e percorre anche le proprietà ereditate — usa for...of o i metodi degli array.
Sintassi:
for (variable in object) {
// code to be executed
}Esempio:
Il Loop for...of
Il loop for...of itera sui valori di oggetti iterabili come gli array, le stringhe, Map e Set. È il modo più pulito per scorrere gli elementi di un array quando non hai bisogno dell'indice. Ricorda la differenza: for...in fornisce le chiavi, for...of fornisce i valori.
Sintassi:
for (variable of iterable) {
// code to be executed
}Esempio:
Scegliere il Loop Giusto
| Loop | Ideale per | Fornisce |
|---|---|---|
for | Un numero noto di ripetizioni, o quando hai bisogno dell'indice | Un contatore che controlli |
while | Ripetere finché una condizione cambia, numero sconosciuto | Nulla — gestisci lo stato tu |
do...while | Come while, ma deve eseguire almeno una volta | Nulla — esegue prima il corpo |
for...in | Iterare sulle chiavi di un object | Nomi delle proprietà (string) |
for...of | Iterare sui valori di un array, string, Map o Set | Ogni valore |
Per la maggior parte del lavoro con gli array incontrerai anche metodi come forEach, map e filter (vedi metodi degli array) — spesso si leggono più chiaramente di un loop manuale.
Loop Annidati
Un loop può contenere un altro loop. Il loop interno viene eseguito completamente per ogni singolo passaggio del loop esterno, il che è utile per griglie, tabelle e coppie.
Controllo dell'Esecuzione del Loop
Usare break nei Loop
L'istruzione break può essere usata per uscire da un loop prima che la condizione diventi falsa.
Esempio:
Usare continue nei Loop
L'istruzione continue salta l'iterazione corrente e continua con quella successiva.
Esempio:
Uscire da Loop Annidati
Per impostazione predefinita, break esce solo dal loop più interno. Per uscire da un loop esterno dall'interno di uno interno, assegna un'etichetta al loop esterno e usa break verso di essa.
Conclusione
Comprendere e usare efficacemente i diversi tipi di loop in JavaScript migliora la tua capacità di scrivere codice conciso ed efficiente. Scegli for quando conosci il conteggio, while/do...while quando non lo conosci, for...of per i valori e for...in per le chiavi degli object — e fai attenzione ai loop infiniti.
Continua con gli argomenti correlati: operatori condizionali, array, metodi degli array e funzioni.