Cicli in JavaScript: for, forEach, while e do-while

I cicli in JavaScript servono a eseguire lo stesso codice più volte di seguito. Tornano utili quando devi percorrere un array o ripetere una precisa operazione un certo numero di volte. In questo capitolo vediamo i cicli for e while, i più usati in JavaScript.

Il ciclo for in JavaScript

Il ciclo for in JavaScript esegue del codice un numero definito di volte. Ecco un esempio d’uso del ciclo for:

for (let i = 0; i < 5; i++) {
  console.log(i);
}

Il ciclo for è inizializzato con la variabile «i», che vale 0. La condizione «i < 5» controlla che «i» sia minore di 5. Se la condizione è vera, il codice tra le graffe viene eseguito e la variabile «i» viene incrementata di 1. Il ciclo continua finché la condizione «i < 5» non diventa falsa.

Il risultato di questo codice è la stampa dei numeri da 0 a 4 nella console.

Puoi usare il ciclo for anche per percorrere un array:

let tableau = ['un', 'deux', 'trois', 'quatre', 'cinq'];

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

Il ciclo for percorre l’array «tableau» e si serve della proprietà «length» dell’array per sapere quanti elementi attraversare. A ogni iterazione, il valore dell’elemento corrente viene stampato nella console.

Puoi anche usare l’istruzione «break» per uscire in anticipo da un ciclo for:

for (let i = 0; i < 5; i++) {
  console.log(i);
  if (i === 3) {
    break;
  }
}

L’istruzione continue in un ciclo for

Esiste anche l’istruzione «continue», che passa all’iterazione successiva del ciclo senza eseguire il resto del codice dell’iterazione corrente. Ecco un esempio di istruzione «continue» in un ciclo for:

for (let i = 0; i < 10; i++) {
  if (i % 2 !== 0) {
    continue;
  }
  console.log(i);
}

In questo esempio il ciclo for percorre i numeri da 0 a 9. L’istruzione «continue» sta dentro il ciclo e controlla se il valore di «i» è dispari. Se lo è, «continue» passa all’iterazione successiva senza eseguire il resto del codice dell’iterazione corrente.

Il risultato di questo codice è la stampa dei numeri pari da 0 a 8 nella console.

Il ciclo forEach in JavaScript

Il ciclo forEach in JavaScript percorre gli elementi di un array o di un oggetto. Ecco un esempio di ciclo forEach su un array:

let tableau = ['un', 'deux', 'trois', 'quatre', 'cinq'];

tableau.forEach(function(element) {
  console.log(element);
});

Il ciclo forEach percorre l’array «tableau» ed esegue per ogni elemento la funzione anonima passata come argomento. Il valore dell’elemento corrente è disponibile dentro la funzione anonima attraverso la variabile «element».

Il risultato di questo codice è la stampa di ogni elemento dell’array nella console.

Puoi usare forEach anche sugli oggetti, passando dal metodo «Object.entries()»:

let objet = {
  un: 'valeur1',
  deux: 'valeur2',
  trois: 'valeur3'
};

Object.entries(objet).forEach(function([clé, valeur]) {
  console.log(clé + ': ' + valeur);
});

Il metodo «Object.entries()» restituisce un array di coppie [chiave, valore] per ogni proprietà dell’oggetto «objet». Il ciclo forEach di JavaScript percorre quell’array ed esegue per ogni voce la funzione anonima passata come argomento. La chiave e il valore sono disponibili dentro la funzione anonima attraverso le variabili «clé» e «valeur».

Il risultato di questo codice è la stampa di ogni voce nella forma «clé: valeur» nella console.

Il ciclo while in JavaScript

Il ciclo while in JavaScript esegue del codice finché la condizione indicata resta vera. Ecco un esempio d’uso del ciclo while:

let a = 0;

while (a < 5) {
  console.log(a);
  a++;
}

Il ciclo while è inizializzato con la condizione «a < 5». Finché la condizione è vera, il codice tra le graffe viene eseguito e la variabile «a» viene incrementata di 1. Il ciclo continua finché la condizione «a < 5» non diventa falsa.

Il risultato di questo codice è la stampa dei numeri da 0 a 4 nella console.

Puoi anche usare il ciclo do-while, che esegue prima il codice tra le graffe e solo dopo controlla la condizione:

let a = 0;

do {
  console.log(a);
  a++;
} while (a < 5);

In questo codice il ciclo do-while viene eseguito almeno una volta, perché la condizione è verificata dopo la prima esecuzione del codice tra le graffe. Anche qui il risultato è la stampa dei numeri da 0 a 4 nella console.

Devi prevedere un’istruzione che incrementi o decrementi la variabile usata nella condizione del while, per non ritrovarti con un ciclo infinito. Se te la dimentichi, la condizione resta sempre vera e il ciclo va avanti all’infinito.

Per evitarlo, l’istruzione deve cambiare il valore di quella variabile a ogni iterazione: è così che la condizione diventa falsa a un certo punto e il ciclo si ferma.

Puoi anche interrompere un ciclo prima che la condizione diventi falsa, con l’istruzione «break». «break» ferma subito l’esecuzione del ciclo e passa all’istruzione che lo segue. Ecco un esempio di istruzione «break» in un ciclo while:

let a = 0;

while (true) {
  console.log(a);
  a++;
  if (a >= 5) {
    break;
  }
}

Il ciclo while è inizializzato con la condizione «true», quindi in teoria non si ferma mai. L’istruzione «break», però, sta dentro il ciclo e scatta quando il valore di «a» raggiunge o supera 5: interrompe l’esecuzione del ciclo e passa all’istruzione che lo segue.

Il risultato di questo codice è la stampa dei numeri da 0 a 4 nella console.

Conclusione

Abbiamo visto i diversi cicli disponibili in JavaScript: il ciclo for, il ciclo forEach e il ciclo while. Per ognuno abbiamo visto come eseguire del codice più volte di seguito e come usare le istruzioni di controllo del flusso, «break» e «continue», per governarne l’esecuzione.