Il metodo forEach di JavaScript è uno di svariati metodi per iterare sugli array. Ogni metodo ha funzionalità diverse, e sta a te decidere quale usare, a seconda di quello che stai facendo.

In questa guida vedremo nel dettaglio il metodo forEach di JavaScript.

Considerando il seguente array:

const numbers = [1, 2, 3, 4, 5];

Usare il tradizionale ciclo for per iterare sull'array sarebbe così:

for (i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
} 

Cosa rende il metodo forEach differente?

Il metodo forEach viene anche adoperato per iterare sugli array, ma usa una funzione a differenza del classico "for loop".

Il metodo forEach passa una funzione callback per ogni elemento dell'array con i seguenti parametri:

  • Valore corrente (obbligatorio): il valore dell'attuale elemento dell'array
  • Indice (facoltativo): l'indice dell'elemento attuale
  • Array (facoltativo): l'oggetto array a cui appartiene l'elemento attuale

Analizziamo questi parametri passo a passo.

Prima di tutto, per iterare su un array usando il metodo forEach, hai bisogno di una funzione callback (o funzione anonima):

numbers.forEach(function() {
    // code
});

La funzione sarà eseguita per ogni singolo elemento dell'array. Deve avere almeno un parametro che rappresenta gli elementi dell'array.

numbers.forEach(function(number) {
    console.log(number);
});

Questo è tutto quello che dobbiamo fare per iterare sull'array:

Ads-z-2

In alternativa, puoi usare la funzione freccia di ES6 per semplificare il codice:

numbers.forEach(number => console.log(number));
Funzione freccia

Parametri facoltativi

Indice

Ok, adesso continuiamo con i parametri opzionali. Il primo è il parametro "indice", che rappresenta il numero dell'indice di ogni elemento.

In pratica, possiamo vedere il numero di indice di un elemento se lo includiamo come secondo parametro:

numbers.forEach((number, index) => {
    console.log('Index: ' + index + ' Value: ' + number);
});
Ads-z-3

Array

Il parametro array è l'array stesso. Anche questo parametro è opzionale e può essere usato in varie operazioni. Se lo invochiamo, sarà visualizzato nella console tante volte quanti sono gli elementi nell'array:

numbers.forEach((number, index, array) => {
    console.log(array);
});
Ads-z

Puoi vedere un esempio dell'uso del metodo forEach in questo video:

Supporto dai browser

Il metodo Array.forEach è supportato da tutti i browser tranne IE versione 8 e precedenti:

Ads-z
caniuse.com

Grazie per aver letto!