JavaScript reduce(): come funziona e quando usarlo

let result = array.reduce((acc, v, i, a) => {
// restituisce il nuovo valore alla variabile 
}, initVal);

// result - il valore unico restituito.
// array - l'array su cui viene eseguita la funzione di riduzione.
// acc - l'accumulatore accumula tutti i valori restituiti.
// v - il valore corrente in fase di elaborazione
// i - l'indice corrente del valore in fase di elaborazione.
// a - l'array di origine
// initVal - un valore iniziale fornito in modo facoltativo.
// Se il valore iniziale non viene fornito,
// l'elemento 0 viene usato come valore iniziale.

Il metodo javascript reduce si può vedere come un ciclo for pensato apposta per usare i valori di un array e costruire qualcosa di nuovo. Dai un’occhiata a questo esempio.

var array = [11, 12, 13, 14];
var sum = 0;
for(var i = 0; i  < array.length; i++) {
      sum += array[i];
 }

// sum = 50

Lo scopo del codice qui sopra è trovare la somma di tutti i valori del nostro array. Funziona, certo, ma c’è un modo più semplice per ottenere lo stesso risultato.

Rifattorizziamo la funzione precedente con il metodo javascript reduce().

let array = [11, 12, 13, 14];
let sum = array.reduce((bcc, v) => bcc + v);
// sum = 50

Stesso risultato, senza nessun ciclo.

Abbiamo usato la variabile bcc per rappresentare la nostra concatenazione. Siccome il nostro reduce() lavora sull’array, il valore di bcc cresce fino alla fine della funzione.

Ti ricordi che avevo detto che possiamo passare un valore iniziale facoltativo? Si mette in piedi facilmente. Riprendiamo lo stesso esempio di prima: sommiamo il nostro array, ma questa volta partendo da un valore iniziale di 250.

Come diventa il codice quando si parte da un valore iniziale di 250? Basta guardare l’esempio qui sotto.

let array = [11, 12, 13, 14];
let sum = array.reduce((bcc, v) => bcc + v, 250);

Come vedi, il codice qui sopra è quasi identico all’esempio precedente. L’unica cosa che cambia è un secondo argomento dopo la callback: ho passato il numero 250 come punto di partenza. Adesso, quando eseguiamo la funzione, la somma vale 300.

Spero che ti sia utile. Trovi altri articoli sul tema JavaScript, in particolare sugli array, per esempio per sapere come unire due array JavaScript.