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 (var 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. Tuttavia, il metodo forEach() offre una sintassi più pulita e concisa, rendendo il codice più leggibile.

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 a una funzione 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);

È importante sottolineare che non è stato previsto un modo per interrompere un loop forEach(). Se si necessita di un comportamento di questo tipo, è consigliabile ricorrere a un normale loop e non a forEach(). In alternativa, si possono utilizzare metodi come Array.prototype.every() o Array.prototype.some() che permettono di uscire dal ciclo in base a determinate condizioni.

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). Pertanto, per garantire una maggiore compatibilità, è importante tenere presente le versioni dei browser utilizzati dagli utenti.

Per garantire la compatibilità con browser più vecchi, è possibile ricorrere a polyfill o implementazioni alternative. Ecco un esempio di polyfill per forEach:

if (!Array.prototype.forEach) {
  Array.prototype.forEach = function(callback, thisArg) {
    if (this == null) {
      throw new TypeError('this is null or not defined');
    }
    var O = Object(this);
    var len = O.length >>> 0; // convert to a uint32
    for (var i = 0; i < len; i++) {
      if (i in O) {
        callback.call(thisArg, O[i], i, O);
      }
    }
  };
}

In conclusione, il metodo forEach è uno strumento utile per iterare attraverso un array in modo semplice e leggibile. Tuttavia, è essenziale essere a conoscenza delle sue limitazioni, come l’impossibilità di interrompere il ciclo, e considerare l’implementazione di alternative o compatibilità per progetti destinati a un vasto pubblico.