Javascript Foreach: cos’è e come funziona

In Javascript, forEach è un metodo dell’oggetto Array che consente di ciclare tutti gli elementi contenuti in un array. Il supporto al metodo forEach è stato introdotto con ECMAScript 5 (2011), prima di tale innovazione il linguaggio Javascript non disponeva di un vero e proprio metodo forEach e per effettuare l’iterazione di un vettore era necessario ricorrere, ad esempio, al ciclo for().

var miaArray = ['Pippo', 'Pluto', 'Topolino'];

// utilizzo for()
for (i=0; i<miaArray.length; i++) {
  document.write(miaArray[i] + '<br>');
}

// utilizzo forEach()
miaArray.forEach(function (item) {
  document.write(item + '<br>');
})

Il risultato prodotto tramite il ciclo for() e forEach() sarà il medesimo.

Attraverso il metodo forEach() posso passare, oltre al valore dell’elemento corrente, anche il suo indice:

miaArray.forEach(function (item, index) {
  document.write(index + ' - ' + item + '<br>');
})

Si noti che negli esempi sopra riportati abbiamo sempre fatto ricorso ad una funziona anonima, ma nulla ci vieta di definire come callback una funzione come nell’esempio che segue:

function mostraRisultati(item,index) {
  document.write(index + ' - ' + item + '<br>');
}

miaArray.forEach(mostraRisultati);

E’ importante sottolineare che non è stato previsto un modo per interrompere un loop forEach(). Se si necessita di un comportamento di questo tipo è consigliabile ricorrere ad un normale loop e non un forEach().

Alternativamente al metodo forEach() di Javascript è possibile utilizzare jQuery:

var miaArray = ['Pippo', 'Pluto', 'Topolino'];
$.each(miaArray, function() {
  document.write(this + '<br>');
});

Compatibilità

Essendo stato introdotto con ES5, il metodo forEach() non può considerarsi pienamente cross-browser in quanto non supportato, ad esempio, sulle vecchie versioni di Internet Explorer (quelle precedenti alla 9).