Kako curry funkcije v JavaScriptu

Curried funkcije lahko pomagajo narediti kodo JavaScript bolj berljivo in izrazno. Tehnika currying je idealna, ko želite kompleksno logiko razdeliti na manjše, samozadostne, bolj obvladljive dele kode.

Naučite se vse o curryed funkcijah v JavaScriptu, kako uporabiti tehniko currying funkcij za ustvarjanje delno uporabne funkcije, pa tudi primere uporabe v resničnem življenju za karirane in delno uporabne funkcije funkcije.

Kaj je kariranje?

Currying je dobil ime po matematiku Haskellu B. Curry, koncept pa izhaja iz lambda računa. Currying vzame funkcijo, ki prejme več kot en parameter, in jo razdeli na niz unarnih funkcij (z enim parametrom). Z drugimi besedami, curried funkcija sprejme samo en parameter naenkrat.

Osnovni primer curryinga

Spodaj je primer curried funkcije:

functionbuildSandwich(ingredient1) {
return(ingredient2) => {
return(ingredient3) => {
return`${ingredient1},${ingredient2},${ingredient3}`
 }
 }
}

The zgradi sendvič() funkcija vrne drugo funkcijo — anonimno funkcijo, ki prejme sestavina2 prepir. Nato ta anonimna funkcija vrne drugo anonimno funkcijo, ki prejme sestavina3. Končno ta zadnja funkcija vrne dobesedno predlogo, način oblikovanje nizov v JavaScriptu.

Kar ste ustvarili, je ugnezdena funkcija, kjer vsaka funkcija kliče tisto pod njo, dokler ne pridemo do konca. Zdaj, ko pokličeš zgradi sendvič() in ji posreduje en sam parameter, vrne del funkcije, katere argumente še morate posredovati:

console.log(buildSandwich("Bacon"))

Iz izhoda lahko vidite, da buildSandwich vrne funkcijo:

Za dokončanje klica funkcije bi morali posredovati vse tri argumente:

buildSandwich("Bacon")("Lettuce")("Tomato")

Ta koda posreduje "Bacon" prvi funkciji, "Lettuce" drugi in "Tomato" zadnji funkciji. Z drugimi besedami, zgradi sendvič() funkcija je dejansko razdeljena na tri funkcije, pri čemer vsaka funkcija prejme samo en parameter.

Medtem ko je povsem upravičeno curry z uporabo tradicionalnih funkcij, lahko gnezdenje postane precej grdo, čim globlje se poglobite. Če se želite temu izogniti, lahko uporabite puščične funkcije in izkoristite njihovo čistejšo sintakso:

const buildMeal = ingred1 =>ingred2 =>ingred3 =>
`${ingred1}, ${ingred2}. ${ingred3}`;

Ta predelana različica je bolj jedrnata, prednost uporabe puščične funkcije v primerjavi z navadnimi funkcijami. Funkcijo lahko pokličete na enak način kot prejšnjo:

buildMeal("Bacon")("Lettuce")("Tomato")

Delno uporabljene funkcije Curry

Delno uporabne funkcije so pogosta uporaba kariranja. Ta tehnika vključuje posredovanje le potrebnih argumentov naenkrat (namesto posredovanja vseh argumentov). Kadarkoli pokličete funkcijo s posredovanjem vseh zahtevanih parametrov, pravite, da ste "uporabili" to funkcijo.

Poglejmo primer:

const multiply = (x, y) => x * y;

Spodaj je različica množenja s karijem:

const curriedMultiply = x =>y => x * y;

The curriedMultiply() funkcija prejme x argument za prvo funkcijo in l za drugo funkcijo, potem pomnoži obe vrednosti.

Če želite ustvariti prvo delno uporabljeno funkcijo, pokličite curriedMultiple() s prvim parametrom in vrnjeno funkcijo dodelite spremenljivki:

const timesTen = curriedMultiply(10)

Na tej točki je koda "delno uporabila". curriedMultiply() funkcijo. Torej, kadar koli želite, pokličite kratDeset(), posredovati mu morate samo eno številko in številka bo samodejno pomnožena z 10 (ki je shranjena znotraj uporabljene funkcije):

console.log(timesTen(8)) // 80

To vam omogoča, da nadgradite eno kompleksno funkcijo tako, da iz nje ustvarite več funkcij po meri, od katerih ima vsaka zaklenjeno lastno funkcionalnost.

Oglejte si primer, ki je bližje resničnemu primeru uporabe spletnega razvoja. Spodaj imate a posodobiElemText() funkcija, ki sprejme element id pri prvem klicu vsebino pri drugem klicu in nato posodobi element na podlagi id in vsebina, ki ste jo posredovali:

const updateElemText = id = content
 => document.querySelector(`#${id}`).textContent = content
// Lock the element's id into the function:
const updateHeaderText = updateElemText('header')
// Update the header text
updateHeaderText("Hello World!")

Funkcijska sestava s curried funkcijami

Druga pogosta uporaba curryinga je sestava funkcij. To vam omogoča, da pokličete majhne funkcije v določenem vrstnem redu in jih združite v eno samo bolj zapleteno funkcijo.

Na primer, na hipotetičnem spletnem mestu za e-trgovino so tukaj tri funkcije, ki bi jih morda želeli izvajati eno za drugo (v natančnem vrstnem redu):

const addCustomer = fn =>(...args) => {
console.log("Saving customer info")
return fn(...args)
}
const processOrder = fn =>(...args) => {
console.log(`processing order #${args[0]}`)
return fn(...args);
}
let completeOrder = (...args) => {
console.log(`Order #${[...args].toString()} completed.`);
}

Upoštevajte, da ta koda uporablja pustiti ključna beseda za opredelitev dokončajNaročilo() funkcijo. To vam omogoča, da spremenljivki znova dodelite vrednost in je njen del kako določanje obsega deluje v JavaScriptu.

Nato morate poklicati funkcije v obratnem vrstnem redu (od znotraj navzven), ker bi želeli najprej dodati stranke:

completeOrder = (processOrder(completeOrder));
completeOrder = (addCustomer(completeOrder));
completeOrder("1000")

To vam bo dalo naslednje rezultate:

Če bi zgornje funkcije napisali na običajen način, bi koda izgledala nekako takole:

functionaddCustomer(...args) {
returnfunctionprocessOrder(...args) {
returnfunctioncompleteOrder(...args) {
// end
 }
 }
}

Ko pokličete addCustomer() funkcijo in posredujete argumente, začnete od znotraj in se prebijate na vrh funkcije.

Pretvorite običajno funkcijo v funkcijo Curri s funkcijo Curry

Če nameravate pogosto uporabljati curried funkcije, lahko poenostavite postopek s pomožno funkcijo.

Ta funkcija bo katero koli običajno funkcijo pretvorila v karijsko funkcijo. Za obdelavo poljubnega števila argumentov uporablja rekurzijo.

const curry = (fn) => {
return curried = (...args) => {
if (fn.length !== args.length) {
return curried.bind(null, ...args)
 }
return fn(...args);
 }
}

Ta funkcija bo sprejela katero koli standardno napisano funkcijo, ki prejme več kot en parameter in vrne karirano različico te funkcije. Če ga želite videti v akciji, uporabite ta primer funkcije, ki vzame tri parametre in jih sešteje:

const total = (x, y, z) => x + y + z

Za pretvorbo te funkcije pokličite curry() funkcija in pass skupaj kot argument:

const curriedTotal = curry(total)

Zdaj, da pokličete funkcijo, morate samo posredovati vse argumente:

console.log(curriedTotal(10)(20)(30)) // 60

Več o funkcijah v JavaScriptu

Funkcije JavaScripta so izjemno prilagodljive in curry funkcije so le majhen del tega. Obstaja veliko drugih vrst funkcij, kot so puščične funkcije, konstruktorske funkcije in anonimne funkcije. Seznanitev s temi funkcijami in njihovimi komponentami je ključna za obvladovanje JavaScripta.