JavaScript: quando usare for e forEach

In genere la discussione verte sulla performance dei due costrutti. In realtà occorre soffermarsi sulla sintassi e sui casi d'uso più appropriati.

for è adatto per effettuare iterazioni su strutture lineari composte da dati semplici.

Questo costrutto da accesso unicamente all'indice numerico di una collezione indicizzata (indexed collection) come un array.

Tramite l'indice si accede all'elemento corrente. Quando dobbiamo effettuare operazioni come l'eliminazione di una stringa da un array di stringhe o più in generale tutte quelle operazioni in cui l'indice numerico è sufficiente a svolgere il nostro compito, allora possiamo usare for.

Al contrario, quando dobbiamo operare su strutture composte da dati complessi (ad esempio oggetti), avere accesso unicamente all'indice può non essere sufficiente: in questo caso forEach è la scelta più indicata, perché ci permette di accedere direttamente non solo all'elemento corrente, ma anche all'indice e ad un riferimento all'array stesso.

In tal senso quest'ultimo costrutto può essere considerato come una versione migliorata (enhanced) del primo.

Ad esempio, se volessimo concatenare un array di stringhe in un unico frammento HTML, potremmo usare for:


'use strict';

let arr = ['Lorem', 'Ipsum', 'Dolor'];
let html = '';

for(let i = 0; i < arr.length; i++) {
    let str = arr[i];
    html += '<p>' + str + '</p>';
}

In questo caso forEach sarebbe stato ridondante. Supponiamo ora di dover effettuare la stessa operazione su un array di oggetti e di voler aggiungere a ciascun paragrafo il suo numero progressivo:


'use strict';

let arr = [{text: 'Lorem'}, {text: 'Ipsum'}, {text: 'Dolor'}];
let html = '';

arr.forEach((element, index, array) => {
    let str = element.text;
    let n = index + 1;

    html += '<p>' + n + ') ' + str + '</p>';
});

In altre parole quando la complessità dell'operazione sale, occorre utilizzare lo strumento più adatto.

Torna su