Magasabb rendű funkciók: mik ezek, és egy React példa

Tech Jargon sorozat

Olyan sok mondat merül fel a technikai találkozókon és konferenciákon, feltételezve, hogy már mindenki le van tiltva a szóhasználattal. Gyakran nem vagyok rosszul a nyelven. Gyakran előfordul, hogy a fejlesztők elképedve cselekszenek, hogy hiányzik egy kis tudásom.

Az az igazság, hogy gyakran csak nem tudom a megfelelő szót rá. Emberként, de különösen fejlesztő emberként szeretjük elbocsátani azokat, akik nem „beszélik a beszélgetést”, ezért ez a sorozat arról szól, hogy alaposan megértsük azokat a programozási fogalmakat, amelyeket az embernek „ismernie kell”.

A sorozat első témája a Magasabb rendű funkciók. A minap technikai találkozón voltam, és megbeszéltük a React-et, és hogy a React újoncoknak milyen nehéz bejutniuk a kódba. Említettem, hogy a magasabb rendű komponenseket (HOC) nehéz megérteni. Azt válaszolták, hogy ezek sokkal inkább hasonlítanak a magasabb rendű funkciókhoz, nem értek egyet? És azt mondtam: "Nem tudom, mi ez." Amikor példát kértem, azt mondták, hogy „térkép”. Viccet csináltam arról, hogy fogalmam sincs, mi az a „térkép”, és továbbmentünk.

De mégis: mi a magasabb rendű függvény?

(Megjegyzés: az összes megadott példa Javascriptben található, de ez a fogalom minden programozási nyelvre érvényes.)

Magasabb rendű függvények: definíció

Magasabb rendű függvény az, amely a) függvényt vesz fel argumentumként, vagy b) függvényt ad vissza.

Ha egy függvény nem hajtja végre ezeket a dolgokat, akkor elsőrendű függvény .

Térkép

Kezdjük a példa azt is közölték: map.

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

A mapfunkció egy tömbön van meghívva, és visszahívási funkciót vesz fel. A függvényt a tömb minden elemére alkalmazza, új tömböt ad vissza. [1, 2, 3]tömbünk és num => num * 2 a függvényünk. A visszahívás a funkció argumentum, amelyet a magasabb rendű függvényünknek adunk át.

Ez a HOF a nyelvbe van sütve, az Array ( Array.prototype.map) prototípusával .

Egyéb példák Hofs prototípusa a Array vannak filter, reduceés some.

Egyedi példa

Tehát írjuk meg a saját magasabb rendű függvényünket.

Átadott funkció

const myFunc = age => age * 2

Magasabb rendű funkció

Most egy olyan függvényt írunk, amely felvesz egy függvényt.

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

Átadunk egy számot hof, amely hozzáad 5-öt, majd meghívja az átadott függvényünket, amely megduplázza azt. Ha meghaladunk 10-et, akkor 15-öt adunk át az első függvényünkhöz, amely ezután megduplázódik 30-ra.

Egyedi példa a React „komponensekkel”

Mint fentebb megjegyeztem, ez a téma a React összetevőire hivatkozva került elő. Mivel a React komponens egy függvény, amikor átadjuk egy másik függvénynek, létrehozzuk a saját magasabb rendű függvényünket, amelyet a React „magasabb rendű komponenseknek” hív. Ha állapotfontosságú összetevőket használ (és kibővíti a React- Componenteket), akkor már HOC-kat is használ.

Hontalan alkatrész

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

Van egy úgynevezett funkciónk, detailsamelybe átmegyünk props. Dekonstruáljuk őket, ahogy bejönnek, és hozzárendeljük őket a helyi változókhoz nameés randomNum. Ez az ES6 szintaxisa - ha ismeretlennek tűnik, adj neki egy google-t (imádni fogod).

Ez egy elsőrendű függvény - egy argumentumot ( propsobjektumot) vesz fel, és a sablon literálját adja vissza.

Magasabb rendű komponens

const hoc = (component, props) => { const randomNum = Math.floor(Math.random() * 100) return component({ ...props, randomNum }) }

Ez egy magasabb rendű függvény - befogad egy függvényt ( componentamelyet aztán meghív, további kellékeket adva be). Ez egy rendkívül alapvető példa arra, amit a hontalan React komponensek csinálnak.

Használhatja ezt a mintát olyan absztrakt kód elvonatkoztatására, amelyet az alkalmazás számos összetevője megoszt.

Kíváncsi arra, hogy tud-e fészkelni magasabb rendű funkciókat? Tudsz! De légy óvatos. Az absztrakcióknak megkönnyíteniük kell a kód olvasását és kezelését . Könnyű itt eljutni egy olyan ösvényre, ahol a kódod annyira tompa, hogy senki sem tudja kitalálni, hogyan kell bármit is csinálni.

Hivatkozások

  • Magasabb rendű funkció, Wikipédia
  • Magasabb rendű funkciók, Eloquent Javascript (5. fejezet)
  • Array.prototype MDN dokumentumok.