26-01-2021 - Frontend

Tutorial Javascript: Creiamo una Pipe function con il metodo reduce

Ecco il primo dei nostri video tutorial in cui andremo ad esplorare assieme i meandri della programmazione web e non solo!

 

Oggi indossiamo la classica salopette da idraulico (che, in effetti, abbiamo visto solo su Mario Bros) e parliamo di una piccola funzione che sta molto a cuore ai fan della programmazione funzionale: la funzione pipe e come implementarla in Vanilla JS utilizzando il metodo reduce.

 

Il termine Pipe o Pipeline (dall'inglese "tubatura composta da più elementi") indica un insieme di elementi collegati tra loro in cascata, in modo tale che il risultato prodotto da uno degli elementi (output) sia l'ingresso di quello immediatamente successivo (input), creando così una catena fino ad arrivare al risultato finale.

La funzione Pipe è molto utilizzata nella programmazione funzionale e soddisfa tre concetti molto importanti:

  • Pure function: è una funzione che passati gli stessi parametri in input restituirà sempre lo stesso output
  • Higher-order function: è una funzione che restituisce un'altra funzione che può essere invocata successivamente
  • Closure: la funzione interna restituita ha accesso allo scope della funzione che la racchiude

 

Nel nostro video abbiamo utilizzato il metodo reduce degli Array di JavaScript per scrivere una pipe function, una funzione che accetta "n" funzioni ed ogni funzione eseguirà delle operazioni in base al risultato della funzione precedente, sino a tornare un valore finale alla conclusione della sequenza.

Un po' come faremmo in RxJS, con il metodo pipe() degli Observable, ma fatto in Vanilla JS.

 

Piccolo spoiler (ma questo non dà fastidio), alla fine del video andremo a parlare anche dell'operatore Pipeline, ancora in fase di discussione prima di diventare standard ECMAScript, e di come faciliterà la lettura e la creazione di funzione concatenate.

 

Cari supereroi, qui il link al nostro video, non dimenticate di iscrivervi al nostro canale Youtube per non perdere tanti altri consigli e ci rivediamo presto alla prossima avventura. ;)

 

Guarda il video: Tutorial JS: Pipe Function in Vanilla JS con il metodo reduce