Sådan skriver du din egen rørfunktion i JS

Javascript er så dynamisk, at vi kan vælge mange måder at skrive vores kode på. Hvorfor ikke gøre det på funktionel programmeringsmåde?

Hvad er funktionsrør?

Kan du huske på gymnasiet, i matematik, at du havde to funktioner -
f (x) og g (x).
Og så kan du oprette en ny funktion:
h (x) = f (g (x)).

Den nye funktion ville acceptere et argument og videregive dette argument to g (x) og derefter overføre den evaluerede værdi til den næste funktion = f (g).

Så funktionsrør er den samme basiside, du opretter en ny funktion, der vil "passere" gennem flere mindre funktioner.

At skrive rent

I den funktionelle verden elsker vi at skrive rene funktioner.

En funktion betragter ren, hvis:
1. Den får alle de parametre, den har brug for (bruger ikke globale variabler eller klassemedlemmer)
2. Returner altid den samme output for en given input
3. Har ikke nogen bivirkning (serveropkald, hentning af db, DOM-gengivelse osv.)

De rene funktioner har mange fordele:
1. Det er testbart! Ikke mere opsætning eller skrivning af spotteklasse
2. Det er cache-stand - disse funktioner er deterministiske, hvorfor beregne det samme input mere end én gang?
Der er et cool mønster kaldet memoize, tjek det ud.

Og fordelen vi er her for er:
3. Det er komposit-stand! du kan røre så mange funktioner, som du kan lide for at oprette en mere kompleks funktion (eller endda en hel funktion).

Reducer funktionen

Da vi opretter rørfunktionen baseret på “Array.reduce ()”, forklarer jeg den snart.

reducere () vil tage elementerne i matrixen, behandle dem og returnere et element. Dette ene element kan være enhver ting, endda en funktion, som vi ser i det næste afsnit.

// Sum funktion, får en matrix og returnerer summen
// es5 stil, mabye det er klarere
funktion sum_es5 (arr) {
   arr.reduce (funktion (acc, curr) {
      retur AC + Curr
   }, 0
}
// Den samme funktion skrevet i es6
const sum = arr =>
  arr.reduce ((acc, curr) => acc + curr, 0)
const mul = arr =>
  arr.reduce ((acc, curr) => acc * curr, 1)
sum ([1,2,3]) // 6
mul ([2,3,4]) // 24

Lad os nedbryde det.
Reduceringsfunktionen får to argumenter:

Først
En funktion, denne funktion i sig selv får to argumenter, en akkumulator og den aktuelle værdi. Den første indeholder den samlede værdi, vi hidtil har beregnet. Det andet er det aktuelle element i vores array.

Sekund
Den oprindelige værdi. Akkumulatoren initialiseres med denne værdi.

Så nu er det let at forstå vores Sum-funktion.
Den oprindelige værdi er naturligvis 0, og hver iteration returnerer vi summen af ​​den hidtil samlede samlede værdi og det aktuelle arrayelement.

Opret rørfunktionen

Håndterer mere end et argument

Som vi så i vores rørfunktion, håndterer vi godt med flere argumenter sendt til vores første funktion.

Hvad med funktionen med flere argumenter, der ikke er den første funktion?
Der er et smukt designmønster i den funktionelle verden kaldet curry, der hjælper os med at løse dette problem. Jeg vil dække det i en anden artikel.