Funkční programování v JavaScript, část 2 - Kombinátory

Úvod do kombinátorů

Kombinátory jsou funkce vyšší úrovně, které umožňují kombinovat funkce, proměnné nebo jiné kombinátory. Obvykle neobsahují deklarace vlastních proměnných nebo obchodní logiky. Jsou jediné, které slouží ke spláchnutí řízení v programu funkcí.

V tomto článku se pokusím popsat několik z nich:

• Klepněte na
• Currying
• Pipe/Compose
• Vidlice
• Střídání
• Sekvence

Klepněte na

Kombinátor je velmi užitečný pro funkce, které nic nevracejí. Přebírá funkci, do které jde parametr, a pak ji vrací.

Prohlášení

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

Imperativní příklad

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

axios
.get('http://localhost')
.then({ data } => {
setItems(data)
console.log(data)
onLoadData(data)
}).then(...) // vrací nedefinováno - data v příslibu byla změněna

Deklarativní příklad

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

axios
.get('http://localhost')
.then(({ data }) => data)
.then(tap(setItems)) // (data) => { setItems(data); return data }
.then(tap(console.log)) // jeden then = jedna funkce = jedna odpovědnost
.then(tap(onLoadData))
.then(...) // stále přístup k původním datům
// snadné zachování principu open/close

Currying

Rozděluje argumenty funkce a umožňuje jejich postupné volání.

Prohlášení

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

return curried

};

Příklad

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)
/*
možná volání
currySum(a)(b)(c),
currySum(a)(b,c),
currySum(a,b)(c),
currySum(a,b,c)
*/

currySum(1) // (b, c) => 1 + a + b nebo (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) // vrací 5

const multiplyByFive = multiplyBy(5)
multiplyByFive(10) // vrací 50

Pipe/Compose

Prostřednictvím kompozice je možné předávat data z jedné funkce do druhé. Je důležité, aby funkce přijímaly stejný počet argumentů. Rozdíl mezi funkcemi pipe a compose spočívá v tom, že první z nich vykonává funkce od prvního do posledního, zatímco compose je volá od konce.

Prohlášení

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);

Imperativní příklad

const sine = (val) => Math.sin(val * Math.PI / 180) // není čitelné
 sine(90) // vrací 1

Deklarativní příklad

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
)

sinus(90) // vrátí 1

Vidlice

Vidličkový kombinátor je užitečný v situacích, kdy chcete zpracovat hodnotu dvěma způsoby a výsledek zkombinovat.

Prohlášení

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

Příklad

const length = (pole) => array.length
const sum = (array) => array.reduce((a, b) => a + b, 0)
const divide = (a, b) => a / b

const arithmeticAverage = fork(divide, sum, length)

arithmeticAverage([5, 3, 2, 8, 4, 2]) // vrátí 4

Střídání

Tento kombinátor přijímá dvě funkce a vrací výsledek první z nich, pokud je true. V opačném případě vrátí výsledek druhé funkce.

Prohlášení

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

Příklad

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() // vytvořit nové uuid })

const findOrCreate = alt(findUser, newUser)

findOrCreate({ uuid: '123e4567-e89b-12d3-a456-426655440000' }) // vrátí objekt William
findOrCreate({ name: 'John' }) // vrátí objekt John s novým uuid

Sekvence

Přijímá mnoho nezávislých funkcí a každé z nich předává stejný parametr. Tyto funkce obvykle nevracejí žádnou hodnotu.

Prohlášení

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

Příklad

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

const printUserContact = pipe(
findOrCreate, // vrací uživatele
seq(
appendUser('#contact'), // user => void
console.log, // user => void
onContactUpdate // user => void
)
)

printUserContact(userData)