 |
Nel mondo dello sviluppo JavaScript, iterare su array, oggetti o collezioni è una delle operazioni più comuni. Esistono diverse tecniche per farlo, ognuna con i suoi scopi, vantaggi e limiti. In questo articolo analizziamo quattro metodi principali:
- il for classico con indice
- il metodo
forEach - il ciclo
for...of - il ciclo
for...in
Vedremo quando usare ciascuno, quali sono le differenze funzionali e le implicazioni in termini di performance. Inoltre, includeremo l’output prodotto da ciascun ciclo.
 |
1. For Classico (con indice)
for classico è la forma più tradizionale di iterazione in JavaScript. Offre il massimo controllo sul flusso del ciclo, rendendolo ideale per scenari in cui si ha bisogno di accedere all’indice o modificare la logica di incremento.const array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
console.log(array[i]);
}
Output:
1
2
3
4
5✅ Quando usarlo:
-
Quando serve l'indice (
i). -
Se è necessario controllare manualmente l'incremento o eseguire il ciclo al contrario.
-
Quando si vuole ottimizzare al massimo le performance, specialmente in contesti critici.
⚡ Performance:
-
È la forma più veloce e ottimizzata, specialmente se si salva
array.lengthin una variabile.
2. forEach
forEach fornisce una sintassi compatta e leggibile per iterare sugli array. È particolarmente utile in contesti dichiarativi o funzionali, dove la semplicità e la chiarezza del codice sono prioritarie rispetto al controllo fine sul ciclo.const array = [1, 2, 3, 4, 5];
array.forEach((element, index) => {
console.log(element, index);
});
Output:
1 0
2 1
3 2
4 3
5 4✅ Quando usarlo:
-
Quando si lavora con array e si vuole scrivere codice leggibile.
-
Quando non è necessario interrompere il ciclo (
breakocontinuenon sono ammessi). -
Ottimo in contesti funzionali.
⚡ Performance:
-
Più lento del for classico per via del callback.
-
Accettabile per array piccoli o medi.
3. for...of
for...of consente di iterare facilmente su qualsiasi oggetto iterabile, come array, stringhe, Set e Map. È perfetto quando ti interessa solo il valore di ogni elemento, non il suo indice.const array = [1, 2, 3, 4, 5];
for (const value of array) {
console.log(value);
}
Output:
1
2
3
4
5✅ Quando usarlo:
-
Iterazione semplice su array, stringhe, Set, Map.
-
Se non serve l’indice ma solo i valori.
-
Più leggibile del for classico.
⚡ Performance:
-
Più efficiente di
forEach, leggermente meno delforclassico.
4. for...in
for...in è progettato per iterare sulle proprietà enumerabili di un oggetto. A differenza delle altre tecniche, è pensato per oggetti piuttosto che per array, e può restituire anche proprietà ereditate: per questo va usato con cautela.const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
console.log(`${key}: ${obj[key]}`);
}
Output:
a: 1
b: 2
c: 3✅ Quando usarlo:
-
Per oggetti (e solo oggetti).
-
Per ottenere le chiavi enumerabili.
⚠️ Limiti:
-
Non usarlo con array.
-
Ordine delle chiavi non garantito.
⚡ Performance:
-
Più lento e include proprietà ereditate: da usare con attenzione.
Confronto Diretto
| Tecnica | Supporta break? |
Ideale per | Performance | Supporta indice? |
|---|---|---|---|---|
for classico |
✅ | Array, controlli manuali | ⭐⭐⭐⭐⭐ | ✅ |
forEach |
❌ | Array leggibili | ⭐⭐ | ✅ |
for...of |
✅ | Iterabili (array, set) | ⭐⭐⭐⭐ | ❌ |
for...in |
✅ | Oggetti | ⭐⭐ | Chiavi |
Conclusione
La scelta della tecnica giusta per eseguire un for in JavaScript dipende dal tipo di dato, dal bisogno di controllo e dalle performance richieste.
Usa il for classico per performance e controllo.
forEach per codice leggibile.
for...of per iterabili dove basta il valore.
for...in per oggetti (con attenzione).
Saper scegliere correttamente il ciclo giusto rende il codice più efficiente, leggibile e corretto.
Follow me #techelopment
Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment
