Demonstração do paradigmas de programação funcional no JavaScript moderno em uma funcionalidade real e como isto pode ajudá-lo no trabalho do dia a dia

const firstArray = [1, 4, 7, 9]

// Forma normal de iteração usando um loop
for (let i = 0; i < firstArray.length; i++) {
  firstArray[i] = firstArray[i] * 2
}

// forma utilizando declarative functional
const secondArray = [1, 4, 7, 9]
const mappedItems = secondArray.map(x => x * 2)

//Resultado
firstArray // [2, 8, 14, 18]
secondArray // [1, 4, 7, 9]
mappedItems // [2, 8, 14, 18]

Compare escrever loops com a forma funcional em JavaScript. Usando esse padrão é possível escrever código mais curto, limpo e melhor estruturado.

Claro, este é o mais básico dos exemplos que você verá em todos os lugares. Ninguém está escrevendo programas para multiplicar números, mas o objetivo é entender quanto o modo de escrita da programação funcional podem ajudá-lo a codificar.

Na realidade, você provavelmente estará fazendo um loop de um conjunto de dados, fazendo algumas verificações condicionais, depois modificando os valores e calculando algo no final.

Deixe-me mostrar-lhe o quão fácil de ler isso pode ser comparado aos loops, escrevendo em código o que detalhei acima.

A nova forma de ver a mesma questão, num exemplo mais prática e real, para quem lida com banco de dados, executando todas as operações que acima indique, logo abaixo:

const items = [
  {
    quantidade: 1,
    preco: 4.99,
    nome: 'Brinquedo 1',
    transporte: false
  },     
  {
    quantidade: 3,
    preco: 8.99,
    nome: 'Algum outro brinquedo',
    transporte: false
  },      
  {
    quantidade: 1,
    preco: 40.00,
    nome: 'Brinquedo ainda mais legal',
    transporte: false
  },     
  {
    preco: 4.99,
    nome: 'Shipping',
    transporte: true
  }
]

function isShipping (item) {
  return !item.transporte;
}

function getItemPreco (item) {
  return item.quantidade * item.preco;
}

function getItemsTotal (total, atual) {
  return total + atual;
}

const precoTotalBrinquedos = items
  .filter(isShipping)
  .map(getItemPreco)
  .reduce(getItemsTotal, 0)

Este exemplo de código acima pode ser feito com menos linhas se você apenas escrever a lógica dentro do filtro, mapear e reduzir as funções, mas para mostrar o quão detalhado ele pode ser, abstrai a lógica em funções.
Devido ao fato de que essas funções sempre retornam um novo objeto, elas podem ser concatenadas uma após a outra para produzir resultados tão poderosos.

Toda vez que você escreve um loop, pense se você entenderá o que escreveu após um ano. Agora, veja esse código – não importa quando você olha para ele, é bem claro o que ele faz e em que ordem ele faz isso.

Gostou? Tire um minutinho e dê sua contribuição para Drall Dev Community no Patreon!

Artigos relacionados: