Il metodo forEach di JavaScript si utilizza sugli array per applicare a ciascun elemento una determinata funzione.

Questo metodo è stato introdotto a partire dalla versione ECMAScript 5 (ES5), assieme ad altre caratteristiche.

La sintassi è la seguente: nomearray.forEach(function(currentValue, index, array), thisValue). Dove la funzione è richiesta, mentre thisValue è opzionale e rappresenta il valore da passare alla funzione come valore this. Se non è specificato, come valore this si passa il valore undefined.

La funzione specificata come argomento del metodo forEach ha 3 parametri:

currentValue che è richiesto e rappresenta il valore corrente dell’elemento dell’array;

index è opzionale e rappresenta l’indice dell’elemento corrente dell’array;

array, opzionale, rappresenta l’array a cui appartiene l’elemento preso in considerazione.

Esempio 1 forEach JavaScript

Prendiamo un array di numeri e sommiamo separatamente gli elementi di posto pari da quelli di posto dispari utilizzando il ciclo forEach.

Creiamo dunque un array di numeri e controlliamo la posizione pari o dispari utilizzando l’operatore modulo.

var sommap = 0, sommad = 0;
var numeri = [13, 25, 8, 9, 12, 9];
numeri.forEach(sommaPariDispari);

function sommaPariDispari(elemento, index) {
  if (index % 2 == 0){
     sommap += elemento;
  }
  else {
     sommad += elemento;
  }
  document.getElementById("somma-pari").innerHTML = sommap;
  document.getElementById("somma-dispari").innerHTML = sommad;
}

Al termine inseriamo il calcolo effettuato nella pagina html.

Quindi ad esempio in due div diversi inseriamo le diverse somme calcolate:

<div id="somma-pari"></div>
<div id="somma-dispari"></div>

Lo stesso algoritmo poteva risolversi anche con un ciclo for.

Esempio 2 forEach JavaScript

In questo secondo esempio utilizzeremo anche il terzo parametro, cioè l’array a cui si riferisce l’elemento.

Dato un array di numeri, per ogni elemento aggiungere un numero random.

Realizziamo dunque una funzione dove ad ogni elemento aggiungiamo un numero casuale.

Ecco dunque l’algoritmo completo:

var numeri = [65, 44, 12, 4];
numeri.forEach(aggiungiRandom)

function aggiungiRandom(elemento, index, array) {
  array[index] = elemento + Math.floor(Math.random()*9);
}

document.getElementById("random").innerHTML = numeri;

Nell’html scriviamo poi il div dove visualizzare il risultato:

<div id="random"></div>

In questa lezione abbiamo studiato il metodo forEach di JavaScript attraverso degli esempi pratici.

Alcuni link utili

Indice tutorial JavaScript

Il linguaggio JavaScript

Come utilizzare JavaScript alert

Utilizzare JavaScript prompt

Variabili in JavaScript

Gioco indovina numero in JavaScript

Gioco della morra cinese in JavaScript

Semplice quiz utilizzando gli array

Come realizzare il gioco dei dadi online