Programação Funcional com Javascript — Composição
Tags: desenvolvimentoweb, javascript, composição, programaçãofuncional
Published: 2023-09-08 20:19:37

---
title: Programação Funcional com Javascript — Composição
published: true
date: 2019-01-12 15:25:52 UTC
tags: desenvolvimentoweb,javascript,composição,programaçãofuncional
canonical_url: 
---

### Programação Funcional com Javascript — Composição

Vamos falar neste artigo sobre composição, o que é, como resolver um determinado problema com isso e qual problema ela pode vir a resolver.

### Composição

É quando podemos reunir várias funções em uma única, onde a mesma recebe um número variado de funções por parâmetro, e dentro dela é usado o resultado de uma como entrada da outra. Vamos exemplificar com código, que talvez fique mais claro o entedimento.

### O Problema

Vamos imaginar que estamos sentados em nossa mesinha, ai o gerente chega com a gente e fala que precisa que façamos um novo módulo front-end para o sistema MarombaWebApp, e que nesse módulo, nosso amiguinho do back-end vai devolver uma lista de usuários onde nela possui alguns dados, sendo um deles a quantidade de parcelas faltantes e outro o valor de cada parcela, e que na nossa tela precisamos mostrar a lista de todos os usuários e o total que falta eles pagarem. Precisamos desse controle e o prazo é pra daqui a uma hora.

Dado esse problema e o prazo, apertado, precisamos entregar aquilo funcionando logo, nós nem pensamos na qualidade, só pensamos que estamos já atrasados pra entregar. Com a descrição do problema, a solução já veio na mente, uma lista é comum de receber e pensamos logo em iterar essa lista e somar o montante. Logo, logo nosso problema está resolvido e ficaria dessa forma:

{% gist https://gist.github.com/iagocavalcante/4aaa44ac8ab5bc20a9d5ffd22012e465.js %}

Onde temos uma lista fictícia, uma variável global para receber o nosso total e um laço de repetição onde vamos pegar o valor total de cada usuário. Aparentemente não temos problema algum não é mesmo, mas vamos supor que precisamos dessa mesma lógica em outro módulo do sistema, dado uma lista, eu precise da somatória do total, o que vamos fazer ?! Isso mesmo que você pensou, _ctrl + c_ e _ctrl + v_. Começando assim a repetição de código em todo os nosso sistema, olha que lindeza.

### A Solução

Como vocês já devem ter imaginado, pra solucionar esse nosso pequeno problema, vamos utilizar a técnica de composição e com isso aplicaremos algo conhecido pela maioria dos Dev’s, o princípio da responsabilidade única, o famoso [**S do SOLID**](https://www.youtube.com/watch?v=TMuno5RZNeE).

Nosso primeiro passo, vai ser separar as responsabilidades, onde teremos uma função para realizar o cálculo do valor total por usuário (linha 9) e outra função onde será realizado a somatória total do valor faltante de todos os usuários (linha 12):

{% gist https://gist.github.com/iagocavalcante/27f4783c1390fbdfcbced93fc1cc685d.js %}

Temos o mesmo resultado da nossa solução onde está tudo junto e misturado, só que dessa vez, cada coisa está no seu devido lugar, fazendo só o que precisa fazer.

Porém podemos dar uma melhorada e separar a soma que é feita dentro da função somatorioTotal e criar uma outra função de soma de forma que ela se tornará genérica o suficiente pra ser usada em qualquer outro lugar.

{% gist https://gist.github.com/iagocavalcante/d27b4794ce7f046a59fdacb6031f697f.js %}

No Javascript não existe funções que aceitem composição de forma nativa, por esse motivo, iremos implementar as funções de _map_ e _reduce_ de forma onde aceitem a composição.

Elas terão a seguinte estrutura:

{% gist https://gist.github.com/iagocavalcante/0a522f150ad4fe116255ff885aa4960c.js %}

A função _map_ recebe apenas uma função por parâmetro e retorna uma nova função que exige um parâmetro apenas e o parâmetro é o dado que será processado.

E temos na terceira linha a reatribuição da função reduce, onde nela temos dois parâmetrod, sendo o primeiro a função que será usada para realizar o processamento dos dados e a segunda é o valor inicial. Com isso temos algo padronizado onde a saída de uma função é a entrada da próxima.

Assim podemos organizar de forma mais eficiente o nosso código e torná-lo mais legível, as coisas vão se encaixando e fazendo sentido e fica claro o fluxo dos dados.

{% gist https://gist.github.com/iagocavalcante/b1056c120ae55f5fb4ca030b51a82f8c.js %}

Essa série de programação funcional com javascript foi feita de forma rápida e direta. Esse post, exclusivamente, tive que estudar bastante e ler muitos outros sobre o assunto. Se você quer se aprofundar, recomendo ler os artigos e vídeo de referência.

Aqui vão as principais referências:

[Refatorando para javascript funcional](https://blog.codeminer42.com/refatorando-para-javascript-funcional-composi%C3%A7%C3%A3o-de-fun%C3%A7%C3%B5es-parte-2-ff8cbe53122b)

[Compondo funções javascript](http://cangaceirojavascript.com.br/compondo-funcoes-javascript/)

[Let’s code with function composition — Fun Fun Function](https://www.youtube.com/watch?v=VGB9HbL1GHk)