Articolo originale: https://www.freecodecamp.org/news/javascript-loops-explained-for-loop-for/

I cicli vengono utilizzati in JavaScript per eseguire attività ripetute in base a una condizione. Le condizioni in genere restituiscono true o false. Un ciclo continuerà a funzionare fino a quando la condizione da noi definita ritorna false.

Ciclo for

Sintassi

for (inizializzazione; condizione; espressioneFianle) {
  // codice
}

Il ciclo for è costituito da tre espressioni facoltative, seguite da un blocco di codice:

  • inizializzazione - Questa espressione viene eseguita prima dell'esecuzione del primo ciclo e viene solitamente utilizzata per creare un contatore.
  • condizione - Questa espressione viene controllata ogni volta prima dell'esecuzione del ciclo. Se restituisce true, l'istruzione o il codice nel ciclo viene eseguito. Se restituisce false, il ciclo si interrompe. E se questa espressione viene omessa, restituisce automaticamente true.
  • espressioneFinale- Questa espressione viene eseguita dopo ogni iterazione del ciclo. Questa è solitamente usata per incrementare un contatore, ma può anche essere usata per decrementare un contatore.

È possibile omettere una qualsiasi di queste tre espressioni o le istruzioni nel blocco di codice.

I cicli for sono comunemente usati per eseguire il blocco di codice un determinato numero di volte. Inoltre, puoi usare break per uscire anticipatamente dal ciclo, prima che l'espressione condizione ritorni false.

Esempi

1. Iterare tra numeri interi da 0 a 8:

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

// Output:
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8

2. Utilizzare break per uscire da un ciclo for prima che la condizione sia false:

for (let i = 1; i < 10; i += 2) {
  if (i === 7) {
    break;
  }
  console.log('Elefanti totali: ' + i);
}

// Output:
// Elefanti totali: 1
// Elefanti totali: 3
// Elefanti totali: 5

Errore comune: superare i limiti di un Array

Quando si esegue l'iterazione su un array, è facile superare accidentalmente i limiti dell'array stesso.

Ad esempio, il tuo ciclo potrebbe provare a fare riferimento al 4° elemento di un array con solo 3 elementi:

const arr = [ 1, 2, 3 ];

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

// Output:
// 1
// 2
// 3
// undefined

Esistono due modi per correggere questo codice: impostare la condizione su i < arr.length o i <= arr.length - 1.

Ciclo for...in

Sintassi

for (proprietà in oggetto) {
  // codice
}

Il ciclo  for...in esegue un'iterazione sulle proprietà di un oggetto. Per ogni proprietà viene eseguito il codice nel blocco di istruzioni.

Esempi

1. Iterare sulle proprietà di un oggetto e stampare il nome e il valore nella console:

const capitali = {
  a: "Atene",
  b: "Belgrado",
  c: "Cairo"
};

for (let key in capitali) {
  console.log(key + ": " + capitali[key]);
}

// Output:
// a: Atene
// b: Belgrado
// c: Cairo

Errore comune: comportamento imprevisto durante l'iterazione su un array

Sebbene sia possibile utilizzare un ciclo for...in per eseguire l'iterazione su un array, è consigliabile utilizzare invece un normale ciclo for o un ciclo for...of.

Il ciclo for...in può scorrere su array e oggetti simili a array, ma potrebbe non accedere sempre agli indici dell'array in ordine.

Inoltre, il ciclo for...in restituisce tutte le proprietà e le proprietà ereditate per un array o un oggetto simile a un array, e ciò può portare a comportamenti imprevisti.

Ad esempio, questo semplice ciclo funziona come previsto:

const array = [1, 2, 3];

for (const i in array) {
  console.log(i);
}

// 0
// 1
// 2

Ma se qualcosa come una libreria JS che stai usando modifica direttamente il prototipo dell' Array, un un ciclo  for...in  scorrerà anche su quello:

const array = [1, 2, 3];

Array.prototype.someMethod = true;

for (const i in array) {
  console.log(i);
}

// 0
// 1
// 2
// someMethod

Sebbene la modifica di prototipi di sola lettura come Array o Object vada direttamente contro le migliori pratiche, potrebbe essere un problema con alcune librerie o basi di codice.

Inoltre, poiché for...in è pensato per gli oggetti, è molto più lento con gli array rispetto ad altri cicli.

In breve, ricorda di usare solo i cicli for...in per scorrere gli oggetti, non gli array.

Ciclo for...of

Sintassi

for (variabile of oggetto) {
  // codice
}

Il ciclo for...of esegue un'iterazione sui valori di molti tipi di iterabili, inclusi gli array e i tipi di raccolta speciali come Set e Map. Per ogni valore nell'oggetto iterabile, viene eseguito il codice nel blocco di codice.

Esempi

1. Iterare su un array:

const arr = [ "Fred", "Tom", "Bob" ];

for (let i of arr) {
  console.log(i);
}

// Output:
// Fred
// Tom
// Bob

2. Iterare su  Map:

const m = new Map();
m.set(1, "nero");
m.set(2, "rosso");

for (let n of m) {
  console.log(n);
}

// Output:
// [1, nero]
// [2, rosso]

3. Iterare su  Set:

const s = new Set();
s.add(1);
s.add("rosso");

for (let n of s) {
  console.log(n);
}

// Output:
// 1
// rosso

Ciclo while

Sintassi

while (condizione) {
  // istruzione
}

Il ciclo while inizia valutando la condizione. Se condizione restituisce true, il codice nel blocco delle istruzioni viene eseguito. Se condizione restituisce false, il codice nel blocco delle istruzioni non viene eseguito e il ciclo termina.

Esempi:

  1. Mentre una variabile è inferiore a 10, stampala sulla console e incrementala di 1:
let i = 1;

while (i < 10) {
  console.log(i);
  i++;
}

// Output:
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9

Ciclo do...while

Sintassi:

do {
  // istruzione
} while (condizione);

Il ciclo do...while è strettamente correlato al ciclo while. In un ciclo do...while, la condizione  viene verificata alla fine di ogni iterazione del ciclo, anziché all'inizio prima dell'esecuzione del ciclo.

Ciò significa che è garantito che il codice in un ciclo  do...while venga eseguito almeno una volta, anche se l'espressione condizione  restituisce già true.

Esempio:

  1. Mentre una variabile è inferiore a 10, stampala sulla console e incrementala di 1:
let i = 1;

do {
  console.log(i);
  i++;
} while (i < 10);

// Output:
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9

2. Eseguire il push su un array, anche se la condizione restituisce true:

const myArray = [];
let i = 10;

do {
  myArray.push(i);
  i++;
} while (i < 10);

console.log(myArray);

// Output:
// [10]