Programação funcional em JavaScript Parte 2 - Combinadores

Introdução aos Combinadores

Os combinadores são funções de nível superior que permitem combinar funções, variáveis ou outros combinadores. Normalmente, não contêm declarações das suas próprias variáveis ou lógica empresarial. São os únicos que permitem descarregar o controlo num programa de funções.

Neste artigo, tentarei abordar alguns deles:

• Torneira
• Caril
• Tubo/Compor
• Garfo
• Alternância
• Sequência

Torneira

Um combinador é muito útil para funções que não devolvem nada. Recebe a função para a qual o parâmetro vai e depois é devolvido.

Declaração

const tap = (fn) => (valor) => {
fn(valor);
retorna o valor;
};

Exemplo imperativo

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

axios
.get('http://localhost')
.then({ data } => {
setItems(data)
console.log(data)
onLoadData(data)
}).then(...) // retorna indefinido - os dados na promessa foram modificados

Exemplo declarativo

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

axios
.get('http://localhost')
.then(({ data }) => data)
.then(tap(setItems)) // (dados) => { setItems(dados); return dados }
.then(tap(console.log)) // um then = uma função = uma responsabilidade
.then(tap(onLoadData))
.then(...) // ainda acesso aos dados originais
// fácil de manter o princípio de abrir/fechar

Caril

Divide os argumentos de uma função e torna possível chamá-los sequencialmente.

Declaração

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

return curried

};

Exemplo

const curry = (fn) => {
const curried = (...args) => {
se (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)
/*
chamadas possíveis
currySum(a)(b)(c),
currySum(a)(b,c),
currySum(a,b)(c),
currySum(a,b,c)
*/

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

const multiplyByFive = multiplyBy(5)
multiplyByFive(10) // devolve 50

Tubo/Compor

Através da composição, é possível passar dados de uma função para outra. É importante que as funções recebam o mesmo número de argumentos. A diferença entre pipe e compose é que o primeiro executa a função do primeiro ao último, e o compose chama-as a partir do fim.

Declaração

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

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

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

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

Exemplo imperativo

const sine = (val) => Math.sin(val * Math.PI / 180) // não legível
 sine(90) // retorna 1

Exemplo declarativo

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) // devolve 1

Garfo

O combinador de bifurcações é útil em situações em que se pretende processar um valor de duas formas e combinar o resultado.

Declaração

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

Exemplo

const length = (array) => 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]) // retorna 4

Alternância

Este combinador recebe duas funções e devolve o resultado da primeira se for verdadeiro. Caso contrário, devolve o resultado da segunda função.

Declaração

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

Exemplo

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

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

const newUser = dados => ({ ...dados, uuid: uuid() // criar novo uuid })

const findOrCreate = alt(findUser, newUser)

findOrCreate({ uuid: '123e4567-e89b-12d3-a456-426655440000' }) // devolve o objeto William
findOrCreate({ name: 'John' }) // devolve o objeto John com o novo uuid

Sequência

Aceita muitas funções independentes e passa o mesmo parâmetro a cada uma delas. Normalmente, estas funções não devolvem qualquer valor.

Declaração

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

Exemplo

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

const printUserContact = pipe(
findOrCreate, // devolve o utilizador
seq(
appendUser('#contact'), // utilizador => void
console.log, // utilizador => void
onContactUpdate // utilizador => void
)
)

printUserContact(userData)