Funkcionālā programmēšana JavaScript 2. daļa - Kombinatori

Ievads kombinatoros

Kombinatori ir augstākā līmeņa funkcija, kas ļauj apvienot funkcijas, mainīgos vai citus kombinatorus. Parasti tie nesatur savu mainīgo vai biznesa loģikas deklarācijas. Tie ir vienīgie, kas ļauj izpludināt kontroli funkciju programmā.

Šajā rakstā centīšos aplūkot dažus no tiem:

• Pieskarieties
• Currying
• Pipe/Compose
• Dakša
• Alternācija
• Sekvence

Pieskarieties

Kombinators ir ļoti noderīgs funkcijām, kas neko neatgriež. Tas pieņem funkciju, kurai tiek nosūtīts parametrs, un pēc tam tas tiek atgriezts.

Deklarācija

const tap = (fn) => (value) => {
fn(value);
return value;
};

Imperatīvais piemērs

const [items, setItems] = useState(() => [])

axios
.get('http://localhost')
.then({ dati } => {
setItems(data)
console.log(data)
onLoadData(data)
}).then(...) // atgriež nenoteikts - solījumā ietvertie dati ir mainīti.

Deklaratīvs piemērs

const [items, setItems] = useState(() => [])

axios
.get('http://localhost')
.then(({ data }) => data)
.then(tap(setItems)) // (data) => { setItems(data); return data }
.then(tap(console.log)) // viens then = viena funkcija = viena atbildība
.then(tap(onLoadData))
.then(...) // joprojām piekļuve sākotnējiem datiem
// viegli saglabāt atvēršanas/aizvēršanas principu

Currying

Tas sadala funkcijas argumentus un ļauj tos izsaukt secīgi.

Deklarācija

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

return curried

};

Piemērs

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

return curried

};

const sum = (a, b, c) => a + b + c

const currySum = curry(sum)
/*
iespējamie izsaukumi
currySum(a)(b)(c),
currySum(a)(b,c),
currySum(a,b)(c),
currySum(a,b,c)
*/

currySum(1) // (b, c) => 1 + a + b vai (b) => (c) => 1 + a + b
currySum(5)(10) // (c) => 5 + 10 + b
currySum(5, 10) // (c) => 5 + 10 + b
currySum(5)(10)(20) // 35
currySum(5, 10)(20) // 35
currySum(5)(10, 20) // 35

const divideBy = curry((a, b) => b / a)
const multiplyBy = curry((a, b) => a * b)

const divideByTwo = divideBy(2)
divideByTwo(10) // atgriež 5

const multiplyByFive = multiplyBy(5)
multiplyByFive(10) // atgriež 50

Pipe/Compose

Izmantojot kompozīciju, ir iespējams nodot datus no vienas funkcijas citai. Svarīgi, lai funkcijām būtu vienāds argumentu skaits. Atšķirība starp pipe un compose ir tāda, ka pirmā funkcija izpilda funkciju no pirmās līdz pēdējai, bet compose izsauc tās no beigām.

Deklarācija

const pipe = (...fns) => (value, ...args) =>
fns.reduce((v, f, i) =>
i === 0
? f(v, ...args)
: f(v),
value);

const compose = (...fns) => (value, ...args) =>
fns.reduceRight((v, f, i) =>
i === (fns.length - 1)
? f(v, ...args)
: f(v),
value);

const pipe = (...fns) => (value, ...args) =>
fns.reduce((v, f, i) =>
i === 0
? f(v, ...args)
: f(v),
value);

const compose = (...fns) => (value, ...args) =>
fns.reduceRight((v, f, i) =>
i === (fns.length - 1)
? f(v, ...args)
: f(v),
value);

Imperatīvais piemērs

const sine = (val) => Math.sin(val * Math.PI / 180) // nav lasāms
 sine(90) // atgriež 1

Deklaratīvs piemērs

const sine = pipe(
multiplyBy(Math.PI) // ↓ val * Math.PI
divideBy(180), // ↓ val * Math.PI / 180
Math.sin, // ↓ Math.sin(val * Math.PI / 180)
)

const sine = compose(
Math.sin, // ↑ Math.sin(val * Math.PI / 180)
divideBy(180), // ↑ val * Math.PI / 180
multiplyBy(Math.PI) // ↑ val * Math.PI
)

sine(90) // atgriež 1

Dakša

Dakšu kombinātors ir noderīgs situācijās, kad vēlaties apstrādāt vērtību divos veidos un apvienot rezultātu.

Deklarācija

const fork = (join, fn1, fn2) => (value) => join(fn1(value), fn2(value));

Piemērs

const garums = (array) => array.length
const sum = (array) => array.reduce((a, b) => a + b, 0)
const dalīt = (a, b) => a / b

const arithmeticAverage = fork(divide, sum, length)

arithmeticAverage([5, 3, 2, 8, 4, 2]) // atgriež 4

Alternācija

Šis kombinators izmanto divas funkcijas un atgriež pirmās funkcijas rezultātu, ja tā ir true. Pretējā gadījumā tas atgriež otrās funkcijas rezultātu.

Deklarācija

const alt = (fn, orFn) => (value) => fn(value) || orFn(value)

Piemērs

const users = [{ {
uuid: '123e4567-e89b-12d3-a456-426655440000',
name: 'William'
}]

const findUser = ({ uuid: searchesUuid }) =>
users.find(({ uuid }) => uuid === searchesUuid)

const newUser = data => ({ ...data, uuid: uuid() // izveidot jaunu uuid })

const findOrCreate = alt(findUser, newUser)

findOrCreate({ uuid: '123e4567-e89b-12d3-a456-426655440000' }) // atgriež William objektu
findOrCreate({ name: 'John' }) // atgriež John objektu ar jaunu uuid

Sekvence

Tā pieņem daudzas neatkarīgas funkcijas un katrai no tām nodod vienu un to pašu parametru. Parasti šīs funkcijas neatgriež nekādu vērtību.

Deklarācija

const seq = (...fns) => (val) => fns.forEach(fn => fn(val))

Piemērs

const appendUser = (id) => ({ name }) => {
document.getElementById(id).innerHTML = name
}

const printUserContact = pipe(
findOrCreate, // atgriež lietotāju
seq(
appendUser('#contact'), // user => void
console.log, // user => void
onContactUpdate // user => void
)
)

printUserContact(userData)