Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Programação Funcional em JavaScript na práti...

Programação Funcional em JavaScript na prática com Ramda

Não existe solução única para todos os problemas em tecnologia. O mesmo acontece para linguagens de programação! Aprenderemos mais sobre elas através do paradigma de programação funcional. Abordaremos paradigmas de programação, programação funcional e conceitos relacionados como funções de primeira classe, alta ordem e puras, estados, imutabilidade, transparência referencial, funções parciais, currying, composição e recursão. Veremos exemplos utilizando JavaScript puro e a biblioteca Ramda.js construída para o estilo de programação funcional.

Marcel dos Santos

July 21, 2018
Tweet

More Decks by Marcel dos Santos

Other Decks in Programming

Transcript

  1. Interaja nas mídias sociais! 
 
 - fale sobre o

    evento, palestrantes e conteúdo - tire fotos do evento e publique 
 - interaja com outros participantes do evento - tire dúvidas ou dê feedbacks para os palestrantes
  2. os p ar adigmas de pro gr amação definem c

    om o os códigos são es tr ut ur ados…
  3. paradigma imperativo 
 descreve a resolução de um problema através

    de comandos que o computador pode compreender e executar
  4. let result = 0; / / Imperative code to sum

    1 to 10 for (let i = 0; i < = 10; i + + ) { result += i; } console.log(result); / / 55
  5. paradigma declarativo 
 permite especi fi car o que deve

    ser computado e não como deve ser computado
  6. const numbers = [1, 2, 3, 4, 5, 6, 7,

    8, 9, 10]; / / Declarative code to sum 1 to 10 const sum = (a, b) = > a + b; const result = numbers.reduce(sum); console.log(result);
  7. paradigmas de algumas linguagens de programação 
 
 imperativo 


    procedural - C e Pascal orientado a objetos - C++, Java, PHP, Python e Ruby 
 
 declarativo 
 lógico - Prolog funcional - Clojure, Elixir, Elm, Erlang, F#, Haskell, Lisp, OCaml e Scala
  8. Uma função matemática tr ata-se de um simples mapeamento en

    tr e o d om ínio e o c on tr a-d om ínio. 1 2 3 D B A C X Y
  9. o estado de um programa é representado pelos valores dos

    dados armazenados na memória em qualquer ponto de execução do programa
  10. 1. ter parâmetros de entrada 
 2. não depender do

    estado externo 
 3. retorno baseado nos valores de entrada 
 4. não devem causar efeitos colaterais funções puras
  11. / / pure or impure function? let counter = 0;

    function increment() { counter + + ; return counter; } console.log(increment()); / / 1
  12. / / pure function (ES5 syntax) function add(x, y) {

    return x + y; } console.log(add(2, 3)); / / 5
  13. / / pure function (ES6 syntax) const add = (x,

    y) = > x + y; console.log(add(2, 3)); / / 5
  14. transparência referencial 
 propriedade que garante que a saída de

    uma função pura sempre será a mesma dado um mesmo conjunto de argumentos
  15. / / referential transparency const add = (x, y) =

    > x + y; console.log(add(2, 3) = = = 5); / / true console.log(5 = = = 5); / / true
  16. funções de alta ordem e 
 funções de primeira classe

    
 são funções que podem ser atribuídas a variáveis, passadas como argumentos e retornadas de uma função
  17. / / high - order function const add = (x,

    y) = > x + y; const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce(add); const sum10 = numbers.reduce(add, 10); console.log(sum); / / 15 console.log(sum10); / / 25
  18. funções anônimas 
 funções que não possuem nome e que,

    geralmente, são passadas como argumento ou atribuídas
  19. / / anonymous function const numbers = [1, 2, 3,

    4, 5]; const sum = numbers.reduce((x, y) = > x + y); console.log(sum); / / 15
  20. / / closure function function greet(greeting) { return function (name)

    { return `${greeting} ${name}!`; }; } const greet2 = greeting = > name = > `${greeting} ${name}!`; console.log(greet('Hello')('Mary')); / / Hello Mary! console.log(greet2('Hello')('John')); / / Hello John!
  21. recursão 
 é quando uma função é definida em termos

    de si própria, ou seja, quando a função chama ela mesma
  22. diferença entre função e procedimento (procedure) 
 uma função recebe

    um valor e retorna um resultado; um procedimento é um conjunto de comandos executados numa ordem
  23. “D on 't think of functi on s as a

    c ol lecti on of ins tr ucti on s. Think of them as n on -des tr uctive op er ati on s on input `d ou ble = n => n * 2;`” Eric Ellio tt , 2016. https:/ /twitter.com/_ericelliott/status/685172918784004097
  24. o currying é a técnica que permite transformar uma função

    que recebe múltiplos argumentos em uma função que…
  25. a aplicação parcial é quando se executa uma função e

    passa apenas parte de seus argumentos
  26. / / specialization from a curried function / / using

    partial application const greet = R.curry((greeting, name) = > `${greeting} ${name}`); const greetMorning = greet('Good Morning'); console.log(greetMorning('Alice')); / / Good Morning Alice
  27. os parâmetros mais genéricos devem vir mais para o início

    e os parâmetros mais especí fi cos devem vir mais para o fi nal
  28. o JavaScript não possui suporte nativo para currying como nas

    linguagens puramente funcionais Elm ou Haskell
  29. a composição é o processo de combinar uma ou mais

    funções para criar uma nova função
  30. / / composing some functions to achieve a new behaviour

    const sentence = 'estava à toa na vida o meu amor me chamou pra ver a banda passar cantando coisas de amor'; const wordCount = R.length(R.split(' ', sentence)); console.log(wordCount); / / 19
  31. é uma solução elegante e legível e ajuda a evitar

    a utilização do aninhamento de funções
  32. o Ramda possui uma função que permite criar uma nova

    função a partir da composição de funções
  33. / / create a function using composition const sentence =

    'estava à toa na vida o meu amor me chamou pra ver a banda passar cantando coisas de amor'; const countWords = R.compose(R.length, R.split); console.log(countWords(' ', sentence)); / / 19
  34. uma biblioteca construída para o estilo de programação funcional que

    facilita a utilização de pipelines e dados imutáveis
  35. / / shopping cart const cart = [ {id: 1,

    product: 'iPhone', price: 499}, {id: 2, product: 'Kindle', price: 179}, {id: 3, product: 'Macbook Pro', price: 1199}, ]; / / get prices from shopping cart and sum them 
 / / using intermediate values const cartPrices = R.map(item = > item.price, cart); const cartSum = R.sum(cartPrices); console.log(cartSum); / / 1877 realiza o mapeamento da lista de produtos (objetos) para uma lista de preços (números) faz a somatória da lista de números e retorna o total Passo 1
  36. / / shopping cart const cart = [ {id: 1,

    product: 'iPhone', price: 499}, {id: 2, product: 'Kindle', price: 179}, {id: 3, product: 'Macbook Pro', price: 1199}, ]; / / get prices from shopping cart and sum them 
 / / using function composition const totalCart = R.compose( R.sum, R.map(item = > item.price), ); console.log(totalCart(cart)); / / 1877 cria uma nova função a partir da composição de funções e elimina valores intermediários Passo 2 aplicação parcial da função map a composição é feita da direita para a esquerda
  37. / / shopping cart const cart = [ {id: 1,

    product: 'iPhone', price: 499}, {id: 2, product: 'Kindle', price: 179}, {id: 3, product: 'Macbook Pro', price: 1199}, ]; / / get prices from shopping cart and sum them / / using function composition with pipe const totalCart = R.pipe( R.map(item = > item.price), R.sum, ); console.log(totalCart(cart)); / / 1877 Passo 3 o pipe de funções é feito da esquerda para a direita e facilita a leitura do código
  38. / / cleaning data from an input const price =

    '100'; const discount = (perc, value) = > perc * value; let priceInt = parseInt(price); let priceDiscount = discount(0.2, priceInt); console.log(priceDiscount); / / 20 Passo 1
  39. / / cleaning data from an input const price =

    '100'; const discount = (perc, value) = > perc * value; / / using partial application const discount20 = R.partial(discount, [0.2]); let priceInt = parseInt(price); let priceDiscount = discount20(priceInt); console.log(priceDiscount); / / 20 Passo 2 cria uma nova função a partir da aplicação parcial de uma existente
  40. / / cleaning data from an input const price =

    '100'; const discount = (perc, value) = > perc * value; / / using function composition const priceDiscount = R.pipe( parseInt, R.partial(discount, [0.2]), ); console.log(priceDiscount(price)); / / 20 Passo 3 cria uma nova função a partir da composição de funções utilizando a função pipe e elimina valores intermediários
  41. / / cleaning data from an input const price =

    'lambda!'; const discount = (perc, value) = > perc * value; / / using function composition const priceDiscount = R.pipe( parseInt, R.partial(discount, [0.2]), ); console.log(priceDiscount(price)); / / null Passo 4 erro ao receber um valor não numérico
  42. / / cleaning data from an input const price =

    'lambda!'; const discount = (perc, value) = > perc * value; / / using function composition const priceDiscount = R.pipe( parseInt, R.defaultTo(0), R.partial(discount, [0.2]), ); console.log(priceDiscount(price)); / / 0 Passo 5 retorna o valor padrão para o caso de um valor não truthy
  43. …e sim sobre eliminar estado e efeito colateral sempre que

    possível e controlar efeitos colaterais quando necessário
  44. 1. Mostly Adequate Guide 
 2. Functional-Light JavaScript 
 3.

    Ramda Docs 
 4. JavaScript Funcional - Arthur Xavier referências