Ideias documentadas
  • Princípios
  • arquitetura
    • Arquitetura Front-end
    • Arquitetura em camadas
  • web-apis
    • Navigation
    • Barcode Detection API
    • Barcode Detection API - Parte 2
  • Referência
    • Atribuibilidade entre tipos
  • Snippets
    • Pipe
    • Event Emitter
  • Hard
    • Criando uma biblioteca TypeScript
  • Soft
    • Etiqueta para e-mails
  • WebAuthn
    • Introdução
    • 1º Módulo
Powered by GitBook
On this page

Was this helpful?

  1. Snippets

Pipe

Concatenando funções

PreviousAtribuibilidade entre tiposNextEvent Emitter

Last updated 10 months ago

Was this helpful?

Quem programa está acostumado com o conceito de pipe, pois utilizamos pipes em diversos lugares, certo? Por exemplo, quando pegamos a saída de um comando e usamos como entrada para outro comando em no terminal.

history | grep x

Usamos o caractere pipe | para concatenar 2 comandos.

Quando trabalhamos com streaming de dados também vemos o uso de pipes, seja com a biblioteca ou nativamente com a api da web , ou ainda com a api do nodejs.

Mas como eu posso concatenar funções, para que uma função receba como argumento o retorno da função anterior? E eu lhe digo, isso pode ser feito usando !

Vamos primeiro implementar usando apenas JavaScript, para entender de forma simples o que é estritamente necessário para essa implementação.

function pipe(...[fn, ...fns]) {
  return (value) => fns.reduce((prev, curr) => curr(prev), fn(value))
}

Então podemos criar como exemplo uma função que calcula um valor ao quadrado.

const square = (value) => value * 2

Perceba que ela só precisa do valor que será trafegado entre as funções e nada mais, agora vamos criar outra função que calcula a porcentagem e desta vez precisamos informar quantos % queremos.

const percent = (n) => (value) => (n / 100) * value

Vamos concatenar os 2 exemplos.

const calculate = pipe(square, percent(10))

Agora temos uma função nomeada calculate, que recebe um parâmetro e processa o fluxo com ele, retornando o resultado final.

calculate(100) // 20

O que achou?

No próximo vou mostrar como escrever em TypeScript, facilitando a experiência de uso com tipagem estática.

Valeu, abraço

[]s

rxjs
streams
web streams
reduce