CONTATTACI

Blog

sviluppatrice web che disegna intorno a degli ingranaggi

Map, filter e reduce: le 3 funzioni principali sugli array in Javascript

In quest’articolo parlerò nel dettaglio dei Big Three di Javascript. Capirli è un passo importante per ogni sviluppatore Frontend che non teme la programmazione funzionale e la scrittura di codice di un livello superiore. 
Prima di partire voglio dedicare due righe alla programmazione funzionale: in breve è un modo di vedere la creazione di codice, alla pari della classica programmazione imperativa, con la differenza che consente di scrivere in modo molto più pulito, leggibile e testabile, ed è figlia del concetto matematico di Funzione, ossia di una relazione tra insiemi a cui viene associato ad uno o più elementi di un insieme, uno ed un solo elemento dell’altro insieme (Si.. stiamo proprio parlando del concetto di Dominio e di Codominio). Cercando in rete riuscirete sicuramente ad approfondire in quanto è un argomento sempre più popolare tra tutti gli sviluppatori.
Dopo questa breve introduzione, partiamo con i famigerati Big Three di Javascript e del motivo per cui sono preferibili ai normali Loop e cicli. Per spiegarlo userò un approccio pragmatico e ricco di esempi di casi reali. 
Presenterò gli esempi usando sia l’approccio con Arrow Function sia l’approccio ES5, limitandomi a sottolineare quanto la pulizia del codice aumenti drasticamente. 
 

FILTER IN JAVASCRIPT

Partiamo dal metodo FILTER e mettiamolo a confronto con un normale for.
Come filtrereste un Array di oggetti come questo scegliendo solo le auto di tipo minivan”?

Usando un normale ciclo for avremmo una soluzione di questo tipo:

Questo codice funziona perfettamente, nulla da dire. Ma se volessimo effettuare operazioni più complesse e che magari dovranno lavorare direttamente sull’insieme dei minivan? Ecco che a questo for se ne aggiungerà un altro che farà altre operazioni e così via, facendo così aumentare il numero di righe e peggiorando drasticamente la leggibilità del codice. 

Vediamo l’implementazione utilizzando il metodo Filter.

  • Approccio Arrow function: 
     

  • Approccio ES5:
     

in molte meno righe e senza dover gestire indici e altre variabili esterne, abbiamo ottenuto lo stesso risultato! Tutto ciò è veramente fantastico!
Entriamo un attimo nel dettaglio delle implementazioni appena esposte e di come funzionano: il metodo Filter prende come parametro una funzione (callback) che viene eseguita su ogni elemento dell’array su cui viene invocata. La Callback deve tornare un Boolean, quindi true o false, se la condizione ritorna true allora l’elemento verrà aggiunto nell’array finale risultante, in quanto il metodo Filter restituisce un nuovo Array e non agisce sull’originale! 

L’esempio più semplice è il classico in cui avete un array di numeri come questo:

e dovete recuperare solo quelli pari. L'implementazione seguendo l'approccio delle arrow function sarebbe di questo tipo: 

in poche parole se ELEM (che sarebbe il singolo numero dell’array) soddisfa la condizione del return, allora sarà aggiunto in filtered!

MAP IN JAVASCRIPT

In modo molto simile si comporta il metodo Map: anche lui accetta una callback che viene eseguita su ogni singolo elemento dell’array. Il suo obiettivo è applicare delle logiche all’elemento in modo da ritornare un nuovo Array in cui ogni dato è stato Mappato usando la callback. 

Con qualche esempio sarà tutto più chiaro.
Immaginiamo di riprendere lo stesso array di numeri di prima 

e desiderare un array in cui tutti gli elementi sono raddoppiati, insomma.. mappati diversamente!

  • Approccio Arrow function: 

  • Approccio ES5:

Come vedete le regole sono le stesse del metodo Filter! Ad ogni elemento dell’array viene applicata una computazione che lo modifica e lo inserisce in un nuovo array risultante. 
Un esempio più complesso potrebbe essere, partendo dall’array di Cars a inizio articolo, il seguente: modificare tutte gli elementi di tipo minivan, aggiungendo il campo insurance. 
Riposto l'oggetto delle cars di sopra per avere un’immagine più chiara

Una soluzione sarebbe:

Avete notato l’utilizzo dello spread operator per recuperare tutte le proprietà della car (color, type, registration e capacity)?  La proprietà insurance semplicemente si accoderà alle altre esistenti. 
I più attenti avranno visto che il contenuto del return è racchiuso tra delle graffe, ciò consente di preservare l’oggetto originale e prenderne tutti i suoi valori per crearne una copia con l’aggiunta della insurance
Il risultato sarà sempre un array di oggetti di questo tipo, dove ogni elemento avrà la nuova proprietà valorizzata ad undefined in quanto è stata solo aggiunta:

REDUCE IN JAVASCRIPT

Il Metodo Reduce è un pochino più complesso da comprendere, specialmente per chi è alle prime armi. Partiamo da un esempio molto carino sfruttando lo stesso array di macchine di prima: immaginiamo di voler cercare quella con la capacità maggiore, normalmente con un for avremmo creato una variabile di appoggio e di volta in volta avremmo controllato ogni oggetto corrente con il primo salvato, qualcosa del genere:

e poi iteriamo su tutti gli elementi restanti partendo dal secondo

ed ecco che troveremo la macchina con la capacità maggiore o perlomeno la prima in caso di macchine con capacità identiche.

Vediamo il corrispettivo utilizzando il metodo Reduce. 

  • Approccio Arrow function: 

A prima vista può sembrare difficile da comprendere ma se vi soffermate un attimo a capire sarà tutto chiaro, innanzitutto la logica parte dopo la freccia ( => ), tutto ciò messo dopo questo simbolo è direttamente ritornato come risultato. Dopodiché parte il controllo della capacità utilizzando l'operatore ternario, quindi se si verifica che accumulator.capacity sia maggiore o uguale dell’accumulator.capacity allora accumulator resterà invariato, altrimenti sarà sostituito da currentCar.

  • Approccio ES5:

Quindi, ricapitolando, Reduce ha un solo scopo: tirare fuori un solo risultato dall’array su cui viene chiamato! Come i metodi Filter e Map, esegue una callback su ogni singolo elemento, prendendo come parametri l’accumulator o accumulatore e come secondo parametro l’elemento corrente dell’array (NOTA BENE: al primo giro saranno identici). L’elemento di partenza del metodo sarà cars[0] il quale viene specificato in fondo, dopo la callback. 

In poche parole si passa l’elemento di partenza che diventerà l'accumulatore, si controlla con l’elemento corrente e se la condizione viene soddisfatta l'accumulatore sarà aggiornato con il nuovo dato e così via fino alla fine dell’array.

L’esempio più famoso è quello in cui si dimostra come tornare la somma di tutti gli elementi:

La soluzione con reduce è la seguente:

La prima iterazione avrà accumulator = 0 e currentValue = 1 e dato che siamo sul primo elemento e non c’è nessun elemento precedente, viene usato lo zero in fondo cioè il secondo parametro. A questo punto viene fatta la somma (quindi 1).
Alla seconda iterazione la funzione viene chiamata con accumulator = 1 (risultato dell’iterazione precedente!) e currentValue = 2. Anche in questo caso verrà eseguita la somma (quindi 3), e così via fino ad ottenere 30, cioè la somma di tutti i numeri.

Un’ultima caratteristica importante dei Big Three è la loro componibilità. Come dei pezzi di un puzzle questi 3 metodi si incastrano perfettamente, permettendo di eseguire operazioni complesse in un modo elegante e pulito.
Un esempio molto carino e semplice potrebbe essere, partendo dall’array dei numeri di prima, prendere solo i numeri pari, moltiplicarli per 3 e successivamente sommarli:

Il risultato sarà 42, immaginate ora di doverlo fare con dei semplici loop come For o While.. scrivetemi quando avrete provato e vediamo le differenze 😀

Conoscere questi 3 metodi è la chiave per poter salire di livello come sviluppatori Frontend ed affacciarsi senza alcun problema alla risoluzione dei problemi più comuni quando si ha a che fare con rest api o con qualsiasi altro dato che necessiti di essere gestito nel modo più pulito possibile! 

Come ho dimostrato, tutto ciò è facilmente replicabile con normali For, ma perchè guidare un’utilitaria se si può usare una Ferrari e per giunta gratis? A voi la scelta.

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…
Essere uno sviluppatore web vuol dire imparare più linguaggi di programmazione per poter creare diversi tipi di applicazioni.  Per ogni applicazione, la maggior parte delle volte, …
Un buon programmatore, si sa, necessita di un ampio bagaglio di conoscenze per potersi districare tra le difficoltà che questo mestiere comporta. Oggi le richieste sul mercato sono molteplic…
Il mondo del web development è in continua evoluzione e, se da un lato può sembrare una corsa incessante, dall’altro rappresenta senz’altro un vortice di sfide e opportunità.  Come sviluppa…
Il mondo dello sviluppo backend è una parte cruciale di qualsiasi progetto web: definisce la logica che alimenta il lato “non visibile” di un sito o di un’applicazione. Si lega al frontend per mescol…
GitHub è da anni uno degli strumenti di condivisione del codice e versioning più utilizzati tra i web developers. Ad oggi, nel mondo del web development risulta essere uno strumento imprescindibile…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 187 €/mese.

Esempio di finanziamento  

Importo finanziato: € 3990 in 24 rate da € 187 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 4572.88.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.