Articolo originale: https://www.freecodecamp.org/news/javascript-map-reduce-and-filter-explained-with-examples/

Map, reduce, e filter sono tutti metodi appartenenti agli array in JavaScript. Ognuno eseguirà un'iterazione su un array ed eseguirà una trasformazione o un calcolo. Ciascuno restituirà un nuovo array basato sul risultato della funzione. In questo articolo imparerai perché e come usarli.

Ecco un divertente riassunto di Steven Luscher:

Map

Il metodo map() viene utilizzato per creare un nuovo array da uno esistente, applicando una funzione a ciascuno degli elementi del primo array.

Sintassi

var new_array = arr.map(function callback(element, index, array) {
    // Valore restituito per new_array
}[, thisArg])

In callback è richiesto solo element, l'elemento dell'array. Di solito viene eseguita un'azione sul valore e quindi viene restituito un nuovo valore.

Esempio

Nell'esempio seguente, ogni numero in una matrice viene raddoppiato.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(item => item * 2);
console.log(doubled); // [2, 4, 6, 8]

Filter

Il metodo filter() prende ogni elemento in un array e applica un'istruzione condizionale su di esso. Se questa condizione restituisce true, l'elemento viene inviato all'array di output. Se la condizione restituisce false, l'elemento non viene inviato all'array di output.

Sintassi

var new_array = arr.filter(function callback(element, index, array) {
    // ritorna true o false
}[, thisArg])

La sintassi per filter è simile a map, tranne per il fatto che la funzione di callback dovrebbe tornare true per mantenere l'elemento o altrimenti false . In callback, è richiesto solo element.

Esempi

Nell'esempio seguente, i numeri dispari vengono "filtrati", lasciando solo i numeri pari.

const numbers = [1, 2, 3, 4];
const evens = numbers.filter(item => item % 2 === 0);
console.log(evens); // [2, 4]

Nel prossimo esempio, filter()viene utilizzato per ottenere tutti gli studenti i cui voti sono maggiori o uguali a 90.

const students = [
  { name: 'Quincy', grade: 96 },
  { name: 'Jason', grade: 84 },
  { name: 'Alexis', grade: 100 },
  { name: 'Sam', grade: 65 },
  { name: 'Katie', grade: 90 }
];

const studentGrades = students.filter(student => student.grade >= 90);
return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]

Reduce

Il metodo reduce() riduce una matrice di valori a un solo valore. Per ottenere il valore di output, esegue una funzione di riduzione su ciascun elemento dell'array.

Sintassi

arr.reduce(callback[, initialValue])

L'argomento callback è una funzione che verrà chiamata una volta per ogni elemento nell'array. Questa funzione accetta quattro argomenti, ma spesso vengono utilizzati solo i primi due.

  • accumulator - il valore restituito dall'iterazione precedente
  • currentValue - l'elemento corrente nell'array
  • index - l'indice dell'elemento corrente
  • array - l'array originale su cui è stato chiamato reduce
  • L'argomento initialValue è facoltativo. Se fornito, verrà utilizzato come valore dell'accumulatore iniziale nella prima chiamata della funzione di callback.

Esempi

L'esempio seguente somma tutti i numeri in un array di numeri.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function (result, item) {
  return result + item;
}, 0);
console.log(sum); // 10

Nell'esempio successivo, reduce() viene utilizzato per trasformare un array di stringhe in un unico oggetto che mostra quante volte ciascuna stringa appare nell'array. Si noti che questa chiamata a reduce passa un oggetto vuoto {} come parametro initialValue. Questo verrà utilizzato come valore iniziale dell'accumulatore (il primo argomento) passato alla funzione di callback.

var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit'];

var petCounts = pets.reduce(function(obj, pet){
    if (!obj[pet]) {
        obj[pet] = 1;
    } else {
        obj[pet]++;
    }
    return obj;
}, {});

console.log(petCounts); 

/*
Output:
 { 
    dog: 2, 
    chicken: 3, 
    cat: 1, 
    rabbit: 1 
 }
 */

Video esplicativo

Guarda il video qui sotto dal canale YouTube di freeCodeCamp.org. Copre i metodi di array qui discussi, più alcuni altri.