Il ciclo for, for...in, for...of in Javascript

I loop vengono utilizzati nella programmazione per automatizzare le attività ripetitive. I tipi più elementari di loop utilizzati in JavaScript sono le istruzioni while e do…while.

Il for loop è un tipo di ciclo che utilizzerà fino a tre espressioni facoltative per implementare l'esecuzione ripetuta del blocco di codice.

Sintassi dei cicli For

Sintassi di For Loop

// for loop
for (initialization; condition; final expression) {
	// codice da eseguire
};

for (let i = 0; i < 4; i++) {
	// stampa ogni iterazione in console
	console.log(i);
};

Sintassi di For Loop (senza inizializzazione)

Tutte e tre le espressioni nel ciclo for sono facoltative.
Ad esempio, possiamo scrivere la stessa istruzione for senza l'espressione di inizializzazione inizializzando la variabile al di fuori del ciclo.

let i = 0;

for(;i < 4; i++) {
    console.log(i);
};

Sintassi di For Loop (senza condizione)

E' possibile anche rimuovere la condizione dal ciclo.
Useremo un'istruzione if combinata con break per dire al ciclo di interrompere l'esecuzione una volta che i è maggiore di 3.
Cioè finché la l'istruzione if è vera esegui, poi break; (interrompi)

let i = 0;

for(; ; i++) {
  if (i > 4) {
//IMPORTANTE
//L'istruzione break deve essere inclusa. Se la condizione viene omessa il ciclo verrà eseguito per sempre come ciclo infinito e potenzialmente si arresterà in modo anomalo il browser.
    break;
  };
  console.log(i);
};

Sintassi di For Loop (senza espressione finale)

L'espressione finale può essere rimossa inserendola invece alla fine del ciclo.
Entrambi i punti e virgola devono essere ancora inclusi, altrimenti il ciclo non funzionerà

let i = 0;

for(; ;) {
  if (i > 4) {
  /*
  IMPORTANTE
  L'istruzione break deve essere inclusa. Se la condizione viene omessa 
  il ciclo verrà eseguito per sempre come ciclo infinito e potenzialmente 
  si arresterà in modo anomalo il browser.
  */
  break;
  };
  console.log(i);
  i++;
};

Sintassi di For Loop (per modificare un array)

È possibile usare il ciclo for per modificare un Array

//creazione di un array vuoto
let mioarray = [];

//inizializza il ciclo per 4 esecuzioni
for (let i = 0; i < 4 ; i++) {
  // aggiorna l'array con il valore della variabile
  mioarray.push(i);
  console.log(mioarray)
};

/* output:
[ 0 ]
[ 0, 1 ]
[ 0, 1, 2 ]
[ 0, 1, 2, 3 ]
*/

Sintassi di For Loop (per la lunghezza dell'array)

A volte, potremmo aver bisogno di eseguire un ciclo un numero di volte senza essere certi del numero di iterazioni. Invece di dichiarare un numero statico, come abbiamo fatto negli esempi precedenti, possiamo utilizzare la proprietà length di un array per fare in modo che il ciclo venga eseguito tante volte quante sono le voci nell'array.

//Dichiarazione di un array con 3 elementi
let frutta = ["Banana","Arancia","Mela"];

// Inizializza il ciclo for per la lunghezza totale dell'array
for (let i = 0; i < frutta.length ; i++) {
  // aggiorna l'array con il valore della variabile
  console.log(frutta[i]);
};

/* output:
Banana
Arancia
Mela
*/

/* 
In questo esempio, incrementiamo ogni indice dell'array con frutta[i]
ad es. il ciclo aumenterà di frutta[0], frutta[1], ecc...
Ciò fa sì che l'indice si aggiorni dinamicamente ad ogni iterazione.
*/

Sintassi di For..in Loop

L'istruzione for…in esegue un'iterazione sulle proprietà di un oggetto.

// Creazione di un oggetto con le sue proprietà
const limone = {
	provenienza: "Costiera Amalfitana",
	colore: "Giallissimo",
	quantita: "Infiniti"
};

// per accedere alle proprietà dell'oggetto
for (attributi in limone) {
  console.log(attributi)
};
/* Output:
provenienza
colore
quantita
*/

// per accedere ai valori delle proprietà
for (attributi in limone) {
  console.log(limone[attributi])
};
/* Output:
Costiera Amalfitana
Giallissimo
Infiniti
*/

// per modificare 
for (attributi in limone){
  console.log(`${attributi}`.toUpperCase() + `: ${limone[attributi]}`);
};
/* Output:
PROVENIENZA: Costiera Amalfitana
COLORE: Giallissimo
QUANTITA: Infiniti
*/

// Stessa cosa vale anche per gli array
const arance = ["dolci","amare","aspre"];
for(attributi in arance){
  console.log(arance[attributi]);
};

Sintassi di For..of Loop

L'istruzione for...of è una funzionalità più recente di ECMAScript 6, ed è buono usarlo per iterare sopra gli array e le stringhe.
L'istruzione for...of a differenza di for..in può essere usato solo sugli array, map, set e arguments.

Quindi, osservando le differenze di entrambe le istruzioni for, posso dire che:

• for...in può essere utilizzato nella maggior parte dei casi poiché lo useresti sia con Objects che Arrays e puoi anche ottenere i valori delle proprietà usando le loro chiavi.
• Tuttavia, quando lavori solo con gli array e ti preoccupi solo dei valori delle proprietà, starai meglio con il for...of

let lista = [4, 5, 6];

//usando for of
for (let i of lista) {
   console.log(i); // output:  "4", "5", "6"
};

//usando for in
for (let i in lista) {
   console.log(i); // output: "0", "1", "2",
};

/* esempio di creazione di una tabella con ciclo for innestato*/

let tabella = '';
tabella += '';
for(let i = 0; i < 1; i++) {
    tabella += '';
    for(let i = 0; i < 5; i++) {
        tabella += '';
    }
    tabella += '';
};
for(let i = 0; i < 4; i++) {
    tabella += '';
    for(let i = 0; i < 5; i++) {
        tabella += '';
    }
    tabella += '';
}
tabella += '';
tabella += '
Titolo Cella ' + i + '
Cella ' + i + '
';

document.getElementById('tabella').innerHTML = tabella;

/* Esempio di ciclo for con creazione struttura html*/
let conteggio = 1;
let div = '
';
for(let i=10;i < 20;i++) {
    div += '<p id="txtID' + i + '">Questo parafrafo è stato creato con ciclo for ed è : ' + conteggio++ ;
    div += '
';
}
div += '
';

document.getElementById('nuovastruttura').innerHTML = div;

// Esempio di ciclo for con interruzione (break) una volta raggiunto l'obiettivo

let myArray = [1,2,3,4,5,6,7,8,9,10,11,12];
for(let i=0;i < myArray.length; i++) {
    if(myArray[i] === 5) {
        break;
    }
console.log('iterazione' + i)
};

// Esercizio con For
for(let i=0; i < 10;i++) {
    document.write(i);
    console.log(i);
}