High-order Function Filter

Hoje vamos de continuar falando sobre as high-order functions que podemos aplicar em um vetor em JavaScript. Nós já tínhamos feito algumas high-order functions anteriormente, nas quais mostrei o Map e o Reduce, nesse exemplo, vou mostrar o FIlter, que também é muito interessante.

Vamos imaginar que temos um estoque que atualiza em tempo real e que por algum motivo a segunda peça está zerada. Quando eu for mostrar o carrinho eu quero que mostre apenas a soma das compras pro estoque maior que zero, para isso podemos usar a high-order function chamada de ‘filter’, ela filtra os itens que estão fora de estoque:

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

const subtotal = (item) => item.preco * item.qtd

const total = carrinho
  .map(subtotal)
  .reduce((soma, subtotal) => subtotal + soma, 0)

const semEstoque = carrinho.filter((item) => item.estoque < item.qtd)

console.log(semEstoque)

Assim ele já mostra quais têm a quantidade zero. Caso ele tivesse 2 de estoque, ele também mostraria que não consegue atender porque o estoque é menor que a quantidade. Então, quando formos somar o total do carrinho, podemos usar o filter para passar uma arrow function:

const total = carrinho
  .filter((item) => item.estoque >= item.qtd)
  .map(subtotal)
  .reduce((soma, subtotal) => subtotal + soma, 0)

const semEstoque = carrinho.filter((item) => item.estoque < item.qtd)

console.log(total)

Perceba que ele não considerou um dos itens, isso acontece porque as high-order function sempre retornam um novo vetor, então quando eu passo o filtro, removo o item do vetor. Então eu estou passando um novo vetor só com o item 1 para o map, que vai multiplicar o preço pela quantidade e vai passar esse novo vetor para o reduce, que vai reduzir somando os valores.

Podemos utilizar essas funções com imutabilidade porque toda vez que filtro, uso o reduce ou map, eu não estou alterando o vetor original, isso é muito importante para a programação funcional. Podemos também o seguinte:

const filtroEmEstoque = (item) => item.estoque < item.qtd

const total = carrinho
  .filter(filtroEmEstoque)
  .map(subtotal)
  .reduce((soma, subtotal) => subtotal + soma, 0)

const semEstoque = carrinho.filter((item) => item.estoque < item.qtd)

console.log(total)

A vantagem de fazermos isso é que acaba ficando cada vez mais fácil de entender, além de ser facilmente testado. Tudo isso feito com funções puras, quanto mais utilizamos essas high-order functions, mais limpo ele fica.

Confira o video:

Curta o DevPleno no Facebook, inscreva-se no canal e cadastre seu e-mail para não perder nenhuma novidade. Deixe suas dúvidas e sugestões nos comentários. Abraço!