Funktioner i højere rækkefølge: hvad de er, og et reaktionseksempel

Tech Jargon-serie

Der er så mange sætninger, der smides rundt på tekniske møder og konferencer, hvis man antager, at alle allerede er ude med lingo. Jeg er ofte ikke ude med lingoen. Det er almindeligt, at udviklere handler forbløffet over, at jeg mangler et stykke viden.

Sandheden er, at jeg ofte ikke kender det rigtige ord til det. Som mennesker, men især udviklermennesker, elsker vi at afskedige dem, der ikke "snakker snakken", så denne serie handler om at få en solid forståelse af programmeringskoncepter, som man ”burde kende”.

Mit første emne for denne serie er Higher-Order-funktioner. Jeg var på et teknisk møde forleden, og vi diskuterede React, og hvor vanskeligt det kan være for React-newbies at komme ind i koden. Jeg nævnte, at komponenter med højere orden (HOC'er) kan være svære at forstå. Et svar var, at de ligner funktioner med højere orden, er jeg ikke enig? Og jeg sagde: ”Jeg ved ikke, hvad det er.” Da jeg bad om et eksempel, fik jeg at vide ”kort”. Jeg lavede en vittighed om, hvordan jeg ikke har nogen idé om, hvad "kort" er, og vi kom videre.

Men stadig: hvad er en funktion med højere orden?

(Bemærk: alle de givne eksempler er i Javascript, men dette koncept gælder for ethvert programmeringssprog.)

Funktioner med højere rækkefølge: en definition

En funktion med højere orden er en, som enten a) tager en funktion som et argument, eller b) returnerer en funktion.

Hvis en funktion ikke udfører nogen af ​​disse ting, er det en førsteordens funktion.

Kort

Lad os starte med det eksempel, jeg fik: kort.

[1, 2, 3]. Kort (num => num * 2)
> [2, 4, 6]

Kortfunktionen kaldes på en matrix og tager en “callback” -funktion. Den anvender funktionen til hvert af elementerne i matrixen og returnerer en ny matrix. [1, 2, 3] er vores matrix og num => num * 2 er vores funktion. Et tilbagekald er funktionsargumentet, der sendes til vores funktion med højere orden.

Denne HOF bages på sproget, prototype på Array (Array.prototype.map).

Andre eksempler på HOF'er, der er prototypeede på Array, er filter, reduktion og nogle.

Brugerdefineret eksempel

Så lad os skrive vores egen funktion med højere orden.

Bestået funktion

const myFunc = alder => alder * 2

Højere ordre-funktion

Nu skriver vi en funktion, der tager en funktion ind.

const hof = (customFunc, alder) => customFunc (age + 5)

Vi sender et nummer til hof, som tilføjer 5 og derefter kalder vores bestået funktion, der vil fordoble det. Hvis vi passerer 10, passerer vi 15 til vores første funktion, der derefter fordobles til 30.

Vores død-simple højere-ordre-funktion kører i terminalen

Tilpasset eksempel med React "komponenter"

Som jeg bemærkede ovenfor, kom dette emne op under henvisning til Reacts komponenter. Da en React-komponent er en funktion, opretter vi vores egen funktion med højere orden, som React kalder “komponenter med højere orden”. Hvis du bruger stateful komponenter (og udvider React's Component), bruger du allerede HOC'er.

Statsløs komponent

const details = ({name, randomNum}) =>
  `$ {navn}, $ {randomNum}`

Vi har en funktion, kaldet detaljer, som vi sender rekvisitter til. Vi dekonstruerer dem, når de kommer ind, og tildeler dem til lokale variabler navn og randomNum. Dette er ES6-syntaks - hvis det ser ukendt ud, så giv det en google (du vil elske det).

Dette er en førsteordens funktion - den tager ét argument (et props-objekt) og returnerer en skabelon bogstavelig.

Komponent med højere orden

const hoc = (komponent, rekvisitter) => {
  const randomNum = Math.floor (Math.random () * 100)
  returkomponent ({... rekvisitter, randomNum})
}

Dette er en højere ordensfunktion - den tager en funktion ind (komponenten, som den derefter kalder, passerer ekstra rekvisitter). Dette er et ekstremt grundlæggende eksempel på, hvad enhver statsløs React-komponent gør.

Vores super-basale

Du kan bruge dette mønster til abstrakt kode, der deles mellem mange komponenter i din ansøgning.

Lurer du på, om du kan indlejre funktioner med højere orden? Du kan! Men vær forsigtig. Abstraktioner skal gøre koden lettere at læse og arbejde med. Det er nemt at komme ned ad en sti her, hvor din kode er så stump, at ingen kan finde ud af, hvordan man gør noget.

Referencer

  • Højere ordre-funktion, Wikipedia
  • Højere ordens funktioner, Eloquent Javascript (kapitel 5)
  • Array.prototype MDN-dokumenter.