I Cicli: for, while e do…while – Corso JavaScript

L’argomento che andremo a trattare in questa sezione del nostro corso JavaScript sono i cicli creati con “for“, “while” e “do…while“. Vedremo in maniera dettagliata queste keywords, il loro funzionamento e utilizzi più comuni. Oltre all’utilizzo delle keyword “break” e “continue” in aggiunta ai cicli JavaScript

In questa guida imparerai cosa sono i cicli (loops i inglese) e in che modo possono essere generati all’interno del codice e di conseguenza come possono migliorare l’esecuzione del codice rispetto ai precedenti if, else o switch, o specialmente agli array.

Se hai ancora dubbi o hai bisogno di ulteriori approfondimenti su JavaScript, puoi consultare il programma completo del corso qui.

Come sempre teniamo a precisare che per proseguire lo studio di JavaScript è consigliato avere conoscenze base anche di HTML e CSS, in quanto le applicazioni JS vengono sviluppate attraverso questi.

I cicli in JavaScript

I cicli o loops, come è facile intuire dal nome, permettono di eseguire un blocco di codice uno specifico numero di volte consecutive, senza dover fornire una gran quantità di istruzioni come può normalmente avvenire con metodi alternativi.

Attraverso una determinata sintassi è possibile ripetere lo stesso script più volte, aggiungendo anche differenti valori per ciclo.

Mediante istruzioni specifiche indicate in fase di programmazione, il loop verifica una condizione prima di poter iniziare ad eseguire un codice, per poi proseguire in maniera ripetuta fino a che la stessa condizione non venga più soddisfatta, interrompendo il ciclo (fatta eccezione per do…while che vedremo più avanti).

Vedremo più avanti con degli esempi pratici il funzionamento di un “loop“.

In JavaScript esistono tre differenti tipi di keyword per indicare un ciclo, ed essi sono:

• For
• While
• Do…while

Ognuno di essi ha una sintassi distinta ed esegue un ciclo a proprio modo.

Sta a te capire quale di questi si adatti meglio alle tue esigenze e al tuo modo di programmare in JavaScript.

Vediamoli ora in dettaglio uno per uno.

For

Con “for” stiamo ad indicare un ciclo di uso comune, semplice da imparare e tra i più utilizzati.

La sintassi è la seguente:

for (dichiarazione 1; dichiarazione 2; dichiarazione 3) {
// blocco di codice da eseguire
}

Un ciclo “for” è composto da 3 elementi o dichiarazioni, contenute nelle parentesi tonde, che precedono lo script da eseguire nel caso queste siano soddisfatte dall’applicazione.

Queste “dichiarazioni” o istruzioni sono divise da un semplice punto e virgola l’uno dall’altro, e hanno i seguenti compiti:

• La “dichiarazione 1” viene eseguita una sola volta prima che il ciclo inizi;
• La “dichiarazione 2” definisce la condizione da soddisfare perché il ciclo venga eseguito;
• La “dichiarazione 3” viene eseguita ogni volta dopo la fine di ogni ciclo.

Di seguito l’uso più comune del for loop.

for (i=1; i<=5; i++){
   document.write(i);
}
// output = 12345

Esaminando il codice:

• La prima dichiarazione(1) crea una variabile nominata “i” con il valore numerico 1.
• Successivamente, nella seconda istruzione(2) viene definita la condizione per eseguire il loop, in questo caso viene indicato che i non deve avere un valore superiore a 5 altrimenti il ciclo non continuerà.
  Se questa risulta true il ciclo continua, se torna false il ciclo finisce.
• L’ultima istruzione(3) indica che al termine di ciascun ciclo il valore della variabile i aumenterà di 1.
• Il risultato sarà “12345”.

La prima dichiarazione è opzionale, cioè può essere omessa in fase di programmazione del ciclo “for“. Questo a patto che sia stata precedentemente indicata in una altra situazione.

Nella prima dichiarazione(1) possono essere indicati più valori o variabili. semplicemente separandoli da una virgola:

for(i=1, x=40; i<=10; i++){
....
}

Come la prima dichiarazione(1), anche la seconda(2) può essere omessa dal ciclo, ma in questo caso presta attenzione: Se non indichi questa istruzione il ciclo non terminerà mai! provvedi a inserire la keyword “break” nel blocco di codice.

Infine, l’ultima dichiarazione(3) può fare di tutto, e viene usata spesso per cambiare il valore della variabile iniziale(1).

Anche questa è opzionale e può essere sostituita/indicata internamente al blocco di codice.

var x = 1;
for (; x<=5; ) {
   document.write(x);
   x++;
}
// 12345

While

Il ciclo “while” è un metodo semplice da imparare, che permette di ripetere un blocco di codice o script se una specifica condizione è soddisfatta (true).

A differenza di “for” la sintassi è semplificata e limitata alla sola condizione:

while (condizione) {
  codice
}

Tra le parentesi che seguono la keyword “while” andrà scritta la condizione per far sì che venga eseguito il blocco di codice seguente. Ciò si ripeterà finché essa non risulti false.

var x=1;
while (i<=5) {
   document.write(i);
   i++
}
//12345

Questo esempio è paragonabile al primo visto nel “for loop“; la differenza è che la variabile e dichiarata prima del ciclo, e l’incremento del valore dopo, nel blocco di codice.

Se la condizione risulta sempre “true“, il ciclo continuerà all’infinito. Per evitare questo, non dimenticarti di incrementare il valore della variabile iniziale.

Do…while

Questa è una variante del ciclo “while” visto in precedenza. Do…while è un loop JavaScript composto da due keywords separate “do” e “while“.

Le differenze tra questo metodo e gli altri già visti, è che do…while esegue il blocco di codice prima di verificare la condizione. Anche qui, se questa poi viene soddisfatta (true), il ciclo ricomincerà.

do {
   codice
}
while (condizione);

Come spiegato nei precedenti capitoli del corso, JavaScript esegue le istruzioni a cascata. Per cui “do” viene eseguito prima di “while“, ed essendo un ciclo, esso ricomincia da capo ogni volta fino a che la condizione non risulti “false“. In ogni caso lo script viene eseguito almeno una volta.

Esempio:

var i=1;
do {
    document.write(i);
    i++;
}
while (i<=5);
//12345

Il punto e virgola (;) alla fine della riga “while” termina il blocco codice del ciclo.

Come “while“, la variabile è dichiarata prima del loop e l’incremento è indicato nello script da eseguire.

Break

L’istruzione “break” è aggiunta nel codice dei loop/cicli per interromperne l’esecuzione. Con break qualsiasi ciclo smetterà di funzionare, come se fosse giunto al termine.

Vediamo un esempio:

for (x=1; x<=6; x++) {
   if(x==4){
     break;
   }
   document.write(x);
}
//1234

Come puoi vedere, il termine previsto dal ciclo è indicato con il valore 6 per la variabile x. Tuttavia, x al raggiungimento del valore 4 interrompe il ciclo con break.

Continue

“Continue” è un’altra keyword possibile da usare nei loop in JavaScript, simile a “break” ma a differenza di questo non interrompe l’esecuzione dell’intero codice, ma solo di una iterazione/ciclo/passaggio.

Per capire meglio riprendiamo l’esempio precedente e sostituiamo “break” con “continue“

for (x=1; x<=6; x++) {
   if(x==4){
     continue;
   }
   document.write(x);
}
//12356

Invece di fermare lo script al valore 4, questo è stato del tutto omesso dal risultato passando alle successive iterazioni (5 e 6), portando a termine il ciclo.

Ora che hai imparato i cicli in JavaScript, ti consiglio di fare pratica con la scrittura per prepararti a nuovi argomenti più complessi.

Il programma completo del corso JavaScript

Articoli recenti:

• Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
• Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
• Come Risolvere i Problemi di Connessione Bluetooth al PC
• Guida alla Cybersecurity: Come proteggerti da minacce informatiche
• Come Aggiungere un Dizionario su App Kindle