No meu último post, por exemplo: O que TODO desenvolvedor JavaScript precisa saber, um dos pontos que gerou mais dúvida foi justamente o da Programação Funcional.
Continue lendo esse artigo para aprender:
- Quais as vantagens de usar a Programação Funcional;
- Como usá-la tanto em ES5 quanto em ES6;
- O que são Pure Functions e Higher-Order Functions;
- Qual a diferença entre Map, *Filter *e Reduce;
- O que é Currying;
- Como compor funções de maneira eficaz;
Para entender as verdadeiras motivações, temos obrigatoriamente que voltar aos conceitos básicos.
A função abaixo possui inputs e outputs bem definidos:
Ela recebe como parâmetro uma variável x e retorna um int que é a multiplicação de x com ele mesmo.
A função abaixo porém, não possui inputs e outputs tão bem definidos:
Ela não recebe nada como parâmetro e retorna o que parece ser uma data processada mas não temos como ter certeza.
Um ponto que vale ser reforçado: só porque não declaramos explicitamente os inputs e outputs dessa função não quer dizer que a mesma não os tenha. Eles apenas estão ocultos. E isso pode gerar um dos piores problemas nas aplicações modernas: os Efeitos Colaterais (side-effects).
Funções como as de cima que possuem inputs e outputs ocultos e podem gerar side-effects são chamadas de Funções Impuras (impure functions). Outra característica importante delas é que se invocarmos uma função impura diversas vezes, o retorno dela nem sempre será o mesmo. O que dificulta a manutenção e os testes na sua aplicação.
Funções Puras (pure functions) por outro lado, como o primeiro exemplo desse post, tem inputs e outputs declarados e não geram side-effects. Além disso, o retorno de uma função pura dado um parâmetro será sempre o mesmo. Obviamente os seus testes serão mais fáceis de desenvolver, assim como a manutenção da sua aplicação.
E por que estamos falando sobre isso?
Porque escrever funções puras e remover side-effects é a base da Programação Funcional.
Agora que temos uma ideia melhor da motivação de se usar Programação Funcional, podemos começar a ver os casos reais e aprender na prática como usá-la.
1) Higher-Order Functions
Matematicamente falando, funções que operam sobre outras funções ou as recebendo como parâmetro ou as retornando são chamadas de Higher-Order Functions.
Essas funções nos permitem fazer abstrações não apenas de valores mas também de ações, como no exemplo abaixo:
A função calculate recebe três parâmetros. O primeiro é uma função qualquer que será invocada passando como parâmetro x e y.
Pensando em um cenário em que precisamos tanto de uma soma quanto de uma multiplicação, podemos pensar na solução dessa forma em ES5:
Ou dessa, bem mais curta, em ES6:
Higher-order functions estão em todos os lugares no ecossistema do JavaScript. Se você já usou testes unitários com Jasmine ou Mocha, então o trecho abaixo deve ser familiar:
Percebemos que o segundo parâmetro tanto de describe quanto de it são funções. Por definição ambas são higher-order functions.
Outro exemplo também é o bom e velho jQuery. Podemos perceber que praticamente todo o código gerado por ele era composto de higher-order functions, como o exemplo abaixo:
Em aplicações desenvolvidas com AngularJS também não é diferente, observe atentamente a definição de um controller:
Agora que já temos conhecimento dos fundamentos: pure functions e higher-order functions podemos nos aprofundar um pouco mais…
2) Map
A função map invoca um callback e retorna um novo array com o resultado desse callback aplicado em cada item do array inicial.
Imaginando um cenário em que temos um array de inteiros e precisamos do quadrado de cada valor desse array, podemos fazer dessa forma bem simples usando a função map em ES5:
Ou assim em ES6:
Nesse outro cenário abaixo, percebemos o reaproveitamento de código que podemos conseguir ao usar o map.
Possuímos dois arrays de objetos diferentes, porém ambos tem o campo name, e precisamos de uma função que retorne um novo array apenas com os names dos objetos:
Em ES6:
Podemos melhorar ainda mais esse trecho de código alterando as funções byName e byNames para que o atributo name não esteja mais tão acoplado. Podemos simplesmente receber como parâmetro qualquer atributo e aplicá-lo a função. Fica como exercício :)
3) Filter
A função filter é bem semelhante ao map: ela também recebe um callback como parâmetro e também retorna um novo array, a única diferença é que filter, como o próprio nome diz, retorna um filtro dos elementos do array inicial baseado na função de callback.
Imaginando que temos um array de inteiros e desejamos retornar apenas aqueles que são maiores do que 4. Podemos resolver assim usando o filter com ES5:
Ou com ES6:
Outro exercício é uma melhoria na função isBiggerThanFour, deveríamos alterá-la para receber como parâmetro qualquer inteiro que desejamos fazer a comparação.
4) Reduce
Uma das funções que mais gera dúvidas é o reduce. Ele recebe como parâmetro um callback e um valor inicial, com o objetivo de reduzir o array a um único valor. O cenário mais comum para explicar o reduce é uma soma:
Com ES6 seria assim:
O primeiro parâmetro é a função que será aplicada, no caso uma soma. E o segundo parâmetro é o valor inicial. Se por algum motivo precisássemos começar a soma com 10, faríamos dessa forma:
Mas o reduce não serve apenas para somas, podemos também trabalhar com strings. Imaginando que nós temos um array de meses e precisamos retornar o meses dessa forma: JAN/FEV/MAR … / DEZ. Podemos fazer assim:
Não era bem o que a gente queria inicialmente. Nós queríamos isso: JAN/FEV/MAR … / DEZMas obtivemos isso:** /JAN/FEV/MAR … / DEZ**
Devemos alterar nossa função monthsShortener para adicionar uma condição que faça a prevenção desse erro:
Feito! E também na versão em ES6:
5) Currying
A técnica de transformar uma função com múltiplos parâmetros em uma sequência de funções que aceitam apenas um parâmetro é chamada de Currying.
Se na teoria ficou confuso, na prática seria transformar isso:
Nisso:
A princípio parece que estamos apenas adicionando mais dificuldade sem nenhum ganho. Porém temos uma grande vantagem: transformar 0 código em pequenos pedaços mais expressivos e com maior reuso.
Pensando em uma aplicação que possui diversos trechos do código uma soma com 5 e outra com 10, podemos usar a segunda versão da função add dessa forma:
Mais um exemplo seria um Hello World simples com uma curried function. Podemos implementá-lo desse jeito com ES5:
Ou com ES6:
6) Compose
Podemos compor funções pequenas para gerar outras mais complexas de forma bem fácil em JavaScript. A vantagem é o poder de usar essas funções mais complexas, de forma simples, em toda aplicação. Ou seja, aumentamos o reuso.
Por exemplo, em uma aplicação em que necessitamos de uma função para transformar uma string passada pelo usuário em um grito: mudar para caracteres maiúsculos e adicionar uma exclamação no final. Podemos fazer assim em ES5:
Ou em ES6:
Esse artigo foi escrito originalmente no canal do Tableless no Medium!