forEach JavaScript

Il metodo forEach di JavaScript si utilizza sugli array per iterare e applica a ciascun elemento una 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, dunque obbligatoria, 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.

forEach JavaScript – Differenza con il ciclo for

Cicliamo un array con il ciclo for e poi il foreach.

Dunque, supponiamo di avere un array di numeri e stampiamoli utilizzando un ciclo for:



var numeri = [13, 25, 8, 9, 12, 9];

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

Adesso stampiamo lo stesso risultato utilizzando questa volta il forEach.



var numeri = [13, 25, 8, 9, 12, 9];

numeri.forEach(function(numero){
  console.log(numero);
});

Abbiamo passato una function con il currentValue che nel nostro caso rappresenta l’elemento contenuto nell’array.

E se volessi stampare anche l’indice con il ciclo forEach?

Basterà aggiungere il secondo parametro della funzione ovvero l’index, che rappresenta l’indice di ciascun elemento.



var numeri = [13, 25, 8, 9, 12, 9];

numeri.forEach(function(numero, index){
  console.log('indice: ' + index + ' numero: ' + numero);
});

Utilizziamo infine l’ultimo parametro che è l’array stesso per stamparlo in output.



var numeri = [13, 25, 8, 9, 12, 9];

numeri.forEach(function(array){
  console.log(array);
});

forEach JavaScript – Esempio 1

Facciamo adesso degli esempi di applicazione del ciclo forEach.

Avendo in input un array di numeri, 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.



let sommap = 0, sommad = 0;
let 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. Implementiamolo per vedere la differenza di utilizzo dei due cicli.



let sommap = 0, sommad = 0;
let numeri = [13, 25, 8, 9, 12, 9];

for(let i = 0; i < numeri.length; i++){
  if (index % 2 == 0){
    sommap += numeri[i];
  }
 else {
    sommad += numeri[i];
 }
 document.getElementById("somma-pari").innerHTML = sommap;
 document.getElementById("somma-dispari").innerHTML = sommad;
}

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:



let 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: