Javascript Funcional — Meu guia de estudos — Parte 1
É hora de elevar a qualidade do nosso código javascript, vamos nessa ?
O que é essa tal de programação funcional de que tanto é falado ? É algo para rocket scientists, ou palpável ao mundo real e nosso dia a dia ? Admito que enquanto estou escrevendo este artigo, ainda não sei exatamente o que responder, vamos descobrir juntos?
JavaScript Linguagem Multi Paradigmas
Seria javascript uma linguagem multi paradigmas? O que isso quer dizer realmente ? A melhor resposta para estes questionamentos, podemos encontrar aqui, na boa e velha MDN:
Resumindo para quem não quer ler (shame on you), javascript é sim multi paradigma, e pode ser usada de modo imperativo, orientada a objetos e ultimamente, muito utilizada de modo funcional também.
Mas o que significa programação funcional?
Procura daqui, procura dali, encontrei um post de um colega nosso, que apresenta muito bem os conceitos da programação funcional:
A programação funcional tem seus pilares no uso da imutabilidade e (pasmem) em funções.
Imutabilidade — Sem variáveis, really ?
Pode não fazer muito sentido de princípio, mas sim, suas variáveis deixarão de existir, serão substituídas por constantes, e isso trará muitas vantagens, acredite.
Funções — A base de tudo
High order functions, pure functions, currying etc. Não, não é uma aula de matemática, mas acostume-se com esse vocabulário / conceitos, eles são fundamentais. A brincadeira aqui se resume em criar funções, que possuem sempre inputs e outputs bem definidos, e podem ser reutilizadas por toda aplicação.
Imutabilidade
No decorrer deste post, a necessidade de utilizarmos imutabilidade ficará mais clara, mas de forma enxuta, a imutabilidade irá nos trazer alguns benefícios, dentre eles os mais importantes são:
- Redução de side-effects (alterações indesejadas em outras partes do app)
- Códigos mais legíveis
- Facilidade de debug / realização de testes
Já precisou sair debugando seu código, e caçando onde uma determinada variável teve seu valor alterado? Então, com a imutabilidade, as análises se tornam mais claras, tudo é o que deveria ser.
Relembrando funções importantes para trabalhar com js de forma funcional
Antes de colocarmos a mão na massa no paradigma funcional, vamos relembrar / aprender algumas funções do javascript que serão fundamentais para a aplicação na programação funcional.
Trabalhando com objetos
Mas e aí, se não vou poder alterar minhas “variáveis”, como posso adicionar, atualizar, extrair e remover valores de objetos ?
Spread Operator -> Adicionando Valores
Adicionando itens com uso do spread operator:
Aprenda e domine o uso dos spread operators. Para quem não sabe, spread operator são esses três pontos ( …refeicao), no artigo abaixo podemos aprender mais sobre suas vantagens:
Spread Operator -> Atualizando Valores
Além de nos ajudar a adicionar valores, o spread também é utilizado para atualizar valores de objetos:
Destructuring -> Extraindo Valores
Muitas vezes, extrair informações de objetos é algo chato, verboso e trabalhoso. É justamente aqui que o destructuring mostra seu poder.
Para quem deseja aprender mais sobre destructuring:
E um exemplo mais simples abaixo:
Rest Syntax
A sintaxe do rest é similar a do spread operator, porém a ordem dos elementos aqui faz toda a diferença.
O que acontece aqui, é que o id é extraído para a const id, e o restante das propriedades são extraídas para a const refeicaoSemId.
Trabalhando com Arrays
Saber como trabalhar os arrays de forma funcional é fundamental, e para isso vamos aprender a utilizar algumas funções que todo desenvolvedor JS deve saber, que são:
.map()
.filter()
.reduce()
Acredite, entender e aplicar estas funções fará uma diferença absurda no desenvolvimento com js, domine-as.
Adicionando itens ao array
Aqui sem muito segredo, faremos novamente o uso do spread operator:
Atualizando itens no array
Aqui nosso querido e amado .map se mostra presente. Neste gist abaixo, temos a mesma função escrita em ES5 e ES6, a fim de facilitar o seu entendimento.
O map é uma função que recebe um array como dado de entrega, uma função para ser chamada para cada argumento, e retorna o array com as transformações realizadas.
Removendo itens de um array
Aqui o map sai de foco, e entra o filter.
Conforme podemos ver a cima, o filter também recebe um array como input, e e uma função que aqui precisa retornar false ou true, a saída é um array com os itens em que a função retornou true.
Consolidando informações em um array
Já passamos pelo map, filter e agora vamos ver o reduce. O reduce é o mais poderoso desses três métodos, e por isso devemos prestar uma especial atenção a ele.
O reduce pode ser utilizados de várias maneiras, mas neste exemplo, vemos a sua utilização mais básica, neste caso, somando todos os valores do array.
Invista seu tempo entendendo todas estas funções/funcionalidades do javascript antes de mergulhar no mundo funcional, caso contrário, a experiência de trabalhar com este paradigma pode se tornar muito ruim.
Agora é hora de estudarmos e fixarmos estes conceitos antes de irmos para a parte 2 deste post.
Vejo vocês nos próximo post.
