Javascript

High-order Function - Reduce

T
Por Tulio Faria 30 de junho de 2017
High-order Function - Reduce

Hoje vamos continuar falando sobre high order functions, principalmente as que estão disponíveis nos vetores em JavaScript. Vamos falar mais especificamente do Reduce. É muito comum utilizarmos o Map junto com o Reduce, ele existe em algumas outras formas como no mongoDB que é o map.reduce, uma técnica bastante utilizada para concatenar dados de forma distribuída.

Suponhamos que nossa ideia é ter um carrinho de compras e somar esse carrinho, para isso podemos utilizar o Reduce e passamos uma função que vai ser responsável por reduzir esse vetor em um valor só.

Como fazer isso?

Primeiramente podemos fazer com uma Arrow Function:

const carrinho = [
  { id: 1, preco: 2, qtd: 2 },
  { id: 1, preco: 3, qtd: 1 }
]

carrinho.reduce()

const total = carrinho.reduce((soma, item) => item.preco + soma, 0)

console.log(total)

Perceba que dentro de item e soma retornamos como queremos somar esse valor e ela começa a soma com 0. Podemos fazer de uma forma mais interessante.

Você se lembra que o MAP transforma de um valor para outro? Então poderíamos fazer o seguinte:

const carrinho = [
  { id: 1, preco: 2, qtd: 2 },
  { id: 1, preco: 3, qtd: 1 }
]

carrinho.reduce()
const total = carrinho
  .map((item) => item.preço * item.qtd)
  .reduce((soma, subtotal) => subtotal + soma, 0)
console.log(total)

Com isso, o Map vai transformar o item em um subtotal e meu Reduce vai somar esses valores transformados. Perceba que são funções bem simples, então é bem tranquilo de testarmos essas funções.

Poderíamos, por exemplo, colocar o item em uma const e passar apenas o subtotal:

const subtotal = (item) => item.preço * item.qtd
const total = carrinho
  .map(subtotal)
  .reduce((soma, subtotal) => subtotal + soma, 0)
console.log(total)

Essa é uma forma bem fácil de se fazer em teste unitários, utilizando bastante funções puras no Map, Reduce, etc. Isso ajuda muito a aumentar a testabilidade do código e consequentemente a qualidade dele.

Confira o vídeo:

Curta o DevPleno no Facebook, inscreva-se no canal e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!