Funzioni di ordine superiore: utilizzo di filtro, mappa e riduzione per un codice più gestibile

Fonte: Unsplash

Le funzioni di ordine superiore possono aiutarti a potenziare il tuo gioco JavaScript rendendo il tuo codice più dichiarativo. Cioè, breve, semplice e leggibile.

Sapere quando e come utilizzare queste funzioni è essenziale. Semplificano la comprensione e la manutenzione del codice. Inoltre, consente di combinare facilmente le funzioni tra loro. Questo si chiama composizione, e non andrò in molti dettagli qui. In questo articolo tratterò le tre funzioni di ordine superiore più utilizzate in JavaScript. Questi sono .filter (), .map () e .reduce ().

Filtro

Immagina di scrivere un pezzo di codice che accetta un elenco di persone in cui desideri filtrare le persone uguali o superiori ai 18 anni.

La nostra lista è simile a quella seguente:

const people = [
 {nome: "John Doe", età: 16},
 {nome: "Thomas Calls", età: 19},
 {nome: "Liam Smith", età: 20},
 {nome: "Jessy Pinkman", età: 18},
];

Vediamo un esempio di una funzione del primo ordine che seleziona persone di età superiore ai 18 anni. Sto usando una funzione freccia che fa parte dello standard ECMAScript o ES6 in breve. È solo un modo più breve di definire una funzione e ti consente di saltare la funzione di digitazione e restituire, nonché alcune parentesi, parentesi graffe e un punto e virgola.

const peopleAbove18 = (collection) => {
  const results = [];
 
  for (let i = 0; i  = 18) {
      results.push (persona);
    }
  }
  risultati di ritorno;
};

E se volessimo selezionare tutte le persone tra 18 e 20 anni? Potremmo creare un'altra funzione.

const peopleB Between18And20 = (collection) => {
  const results = [];
 
  for (let i = 0; i  = 18 && person.age <= 20) {
      results.push (persona);
    }
  }
  risultati di ritorno;
};

Potresti già riconoscere molto codice ripetitivo qui. Questo potrebbe essere astratto in una soluzione più generalizzata. Queste due funzioni hanno qualcosa in comune. Entrambi iterano su un elenco e lo filtrano in base a una determinata condizione.

"Una funzione di ordine superiore è una funzione che accetta una o più funzioni come argomenti". - Closurebridge

Possiamo migliorare la nostra funzione precedente utilizzando un approccio più dichiarativo, .filter ().

const peopleAbove18 = (collection) => {
  raccolta di ritorno
    .filter ((person) => person.age> = 18);
}

Questo è tutto! Possiamo ridurre un sacco di codice extra usando questa funzione di ordine superiore. Inoltre, rende il nostro codice migliore da leggere. Non ci interessa come vengono filtrate le cose, vogliamo solo che filtrino. Andrò a combinare le funzioni più avanti in questo articolo.

Carta geografica

Prendiamo lo stesso elenco di persone e una serie di nomi che dicono se la persona ama bere il caffè.

const coffeeLovers = ["John Doe", "Liam Smith", "Jessy Pinkman"];

Il modo imperativo sarà come:

const addCoffeeLoverValue = (collection) => {
  const results = [];
 
  for (let i = 0; i 
    if (coffeeLovers.includes (person.name)) {
      person.coffeeLover = true;
    } altro {
      person.coffeeLover = false;
    }
 
    results.push (persona);
  }
 
  risultati di ritorno;
};

Potremmo usare .map () per renderlo più dichiarativo.

const incrementAge = (collection) => {
  return collection.map ((person) => {
    person.coffeeLover = coffeeLovers.includes (person.name);
 
    persona di ritorno;
  });
};

Ancora una volta, .map () è una funzione di alto ordine. Consente di passare una funzione come argomento.

Ridurre

Scommetto che ti piacerà questa funzione quando sai quando e come usarla.
La cosa bella di .reduce () è che la maggior parte delle funzioni di cui sopra possono essere fatte con esso.

Facciamo prima un semplice esempio. Vogliamo riassumere tutte le età delle persone. Ancora una volta, vedremo come è possibile farlo utilizzando l'approccio imperativo. Fondamentalmente esegue un ciclo nella raccolta e incrementa una variabile con l'età.

const sumAge = (collection) => {
  lascia num = 0;
 
  collection.forEach ((person) => {
    num + = person.age;
  });
 
  restituire num;
}

E l'approccio dichiarativo usando .reduce ().

const sumAge = (collection) => collection.reduce ((sum, person) => {
 somma di ritorno + person.age;
}, 0);

Possiamo persino usare .reduce () per creare la nostra implementazione di .map () e .filter ().

const map = (collection, fn) => {
  return collection.reduce ((acc, item) => {
    return acc.concat (fn (item));
  }, []);
}
const filter = (collection, fn) => {
  return collection.reduce ((acc, item) => {
    if (fn (item)) {
      return acc.concat (item);
    }
 
    ritorno acc;
  }, []);
}

All'inizio potrebbe essere difficile da capire. Ma quello che fa .reduce () in pratica è iniziare con una raccolta e una variabile con un valore iniziale. Quindi esegui l'iterazione sulla raccolta e aggiungi (o aggiungi) i valori alla variabile.

Combinazione di mappa, filtro e riduzione

Fantastico, che queste funzioni esistano. Ma la parte buona è che esistono sul prototipo di array in JavaScript. Ciò significa che queste funzioni possono essere utilizzate insieme! Ciò semplifica la creazione di funzioni riutilizzabili e la riduzione della quantità di codice necessaria per scrivere determinate funzionalità.

Quindi abbiamo parlato dell'uso di .filter () per filtrare le persone uguali o inferiori a 18 anni. .Map () per aggiungere la proprietà coffeeLover e .reduce () per creare finalmente una somma dell'età di tutti insieme .
Consente di scrivere del codice che combina effettivamente questi tre passaggi.

const people = [
 {nome: "John Doe", età: 16},
 {nome: "Thomas Calls", età: 19},
 {nome: "Liam Smith", età: 20},
 {nome: "Jessy Pinkman", età: 18},
];
const coffeeLovers = ["John Doe", "Liam Smith", "Jessy Pinkman"];
const ageAbove18 = (person) => person.age> = 18;
const addCoffeeLoverProperty = (person) => {
 person.coffeeLover = coffeeLovers.includes (person.name);
 
 persona di ritorno;
}
const ageReducer = (somma, persona) => {
 somma di ritorno + person.age;
}, 0);
const coffeeLoversAbove18 = persone
 .filter (ageAbove18)
 .map (addCoffeeLoverProperty);
const totalAgeOfCoffeeLoversAbove18 = coffeeLoversAbove18
 .reduce (ageReducer);
const totalAge = people
 .reduce (ageReducer);

Se lo fai in modo imperativo, finirai per scrivere molto codice ripetitivo.

La mentalità di creare funzioni con .map (), .reduce () e .filter () migliorerà la qualità del codice che scriverai. Ma aggiunge anche molta leggibilità. Non devi pensare a cosa sta succedendo all'interno di una funzione. È facile da capire

Dove andare dopo?

Ora che hai imparato qualcosa sulle funzioni di ordine superiore, potresti scoprire che questi articoli di seguito potrebbero essere interessanti per te.

Grazie per aver letto! :)

Se ti è piaciuto questo articolo, premi il pulsante a cuore in basso ❤. Significherebbe molto per me e aiuta gli altri a vedere la storia.

Saluta Twitter