In questa guida parliamo di Javascript for, uno dei costrutti più importanti nella programmazione in generale, non solo in Javascript, che ci permette di eseguire più volte una stessa porzione di codice.
Quando, creando un programma, sentiamo la necessità di ripetere delle operazioni in maniera quasi identica o su una sequenza di elementi che, ad esempio, fanno parte di un array, è il momento di ricorrere ad un ciclo ed il ciclo for rappresenta quello più tipico.
In Javascript, come praticamente in ogni altro linguaggio, tale costrutto viene messo a disposizione e si può applicare in tre modi diversi.
In questo articolo, li vediamo tutti evidenziando le diverse circostanze che li rendono necessari offrendo diversi esempi per valorizzarli.
La modalità standard di eseguire un ciclo for vede l’utilizzo di tre espressioni racchiuse tra parentesi tonde e separate da punto e virgola indicanti rispettivamente:
Questa la forma generale del costrutto:
for (condizione iniziale; condizione di iterazione; condizione di incremento) // blocco di codice da eseguire ad ogni iterazione
Vediamo un esempio. Supponiamo di voler stampare una tabellina del 2 in una pagina web. Per far ciò dovremo eseguire un’iterazione su diversi numeri partendo da 1 e fino al 10, ognuno di essi sarà moltiplicato per il numero 2. Vediamo come.
<!DOCTYPE html>
<html>
<body>
<p id="output"></p>
<script>
var risultati=""
for (i = 1; i <= 10; i++) {
risultati+=`${i} X 2 = ${i*2}<br>`
}
document.getElementById("output").innerHTML = risultati;
</script>
</body>
</html>
E l’output ottenuto sarà di questo tipo:
1 X 2 = 2 2 X 2 = 4 3 X 2 = 6 4 X 2 = 8 5 X 2 = 10 6 X 2 = 12 7 X 2 = 14 8 X 2 = 16 9 X 2 = 18 10 X 2 = 20
In molti altri casi però non abbiamo bisogno di una variabile contatore come “i” in questo caso perché il nostro scopo è attraversare un oggetto Javascript o una struttura dati iterabile come un array. Per queste casistiche estremamente comuni, Javascript ha predisposto due versioni del for: for…in e for…of
Iscriviti su devACADEMY e SEGUI TUTTI I CORSI che vuoi!
OLTRE 70 CORSI di coding A TUA DISPOSIZIONE con un’unica iscrizione 🙂
Vediamo come usare il ciclo Javascript for…in.
Questo costrutto è particolarmente utile quando vogliamo ispezionare un oggetto al suo interno navigando tra le sue proprietà.
Supponiamo di avere in una pagina web un oggetto etichettato con il nome data contenente tre proprietà: giorno, mese, anno. Vogliamo stamparne il contenuto estraendo ogni sua singola proprietà:
<!DOCTYPE html>
<html>
<body>
<p id="proprieta"></p>
<script>
var data = {giorno:12, mese:"marzo", anno:2020}
var risultati=""
for (x in data) {
risultati += `${x} = ${data[x]}<br>`
}
document.getElementById("proprieta").innerHTML = risultati
</script>
</body>
</html>
ed il risultato visualizzato sarà:
giorno = 12 mese = marzo anno = 2020
Vediamo invece come utilizzare il ciclo Javascript for…of
Se il nostro scopo fosse ancora diverso, ovvero muoverci tra gli elementi di un array potremmo usare il for…of. Ad esempio, prendiamo una lista di nomi e stampiamoli accompagnati dalla loro lunghezza.
<!DOCTYPE html>
<html>
<body>
<p id="lunghezze"></p>
<script>
var nomi = ["Alessia", "Ugo", "Selvaggia", "Noemi", "Alessandro"]
var risultati=""
for (n of nomi) {
risultati += `${n} = ${n.length} caratteri<br>`
}
document.getElementById("lunghezze").innerHTML = risultati
</script>
</body>
</html>
In output otterremmo questo:
Alessia = 7 caratteri Ugo = 3 caratteri Selvaggia = 9 caratteri Noemi = 5 caratteri Alessandro = 10 caratteri
Come vedi il ciclo for in Javascript è molto potente ed utile ed esistono più versioni e modi di utilizzarlo all’interno del proprio codice a seconda delle esigenze. Per altri approfondimenti su questo linguaggio ti rimando alle altre guide Javascript che trovi online sul nostro sito.
