Javascript Funcional - Front End Campinas

Palestra feita no Castelo Creative Space

Transcript

1. Javascript Funcional Jargões e boas práticas
2. @anabastos ANA BASTOS anabastos.github.io FullStack na Horizon Four.
3. JSLADIES fb.com/jsladiesbr twitter.com/jsladiessp meetup.com/JsLadies-BR/
4. Coisas que eu estou assumindo Conhecimento básico de Js. Um pouco de ES6
5. O que é funcional?
6. Javascript pode ser funcional?
7. Funções
8. f(x) = x * x X Y 1 1 2 4 3 9
9. 1 2 2 4 3 6 4 8 Domínio Imagem x y=f(x) É uma função
10. 1 2 2 3 4 3 Domínio Imagem x y=f(x) É uma função
11. 1 2 2 4 3 6 4 8 Domínio Imagem x y=f(x) NÃO é uma função
12. 1 2 2 4 3 6 4 Domínio Imagem x y=f(x) NÃO é uma função
13. Funções Puras
14. Funções Puras Sempre recebem algo. Sempre retornam algo. Nunca mutam coisas fora do escopo da própria função. Para o mesmo input sempre retornam o mesmo output.
15. Funções nunca devem depender do contexto em que elas estão
16. const taxa = 10 function valorTotal(valor) { return valor + taxa }
17. function valorTotal(valor) { return valor + taxa }
18. Funções nunca devem mutar coisas fora do contexto delas mesmas
19. let taxa = 10 // variáveis globais são do mal function mudarTaxa() { return taxa * 0.1 }
20. function mudarTaxa(taxa) { return taxa * 0.1 } const newTaxa = mudarTaxa(taxa)
21. Efeito Colateral
22. DateTime. Escrever no banco de dados. Mutar variáveis fora do escopo de função.
23. Imutabilidade
24. const ao invés de var ou let
26. const person = { name: 'Ana', age: 21 } const newPerson = person newPerson.age = 22 console.log(newPerson === person) // true console.log(person) // { name: 'John', age: 30 }
28. object.assign()
29. const obj = { valor: 1337 } obj.valor = 42
30. const newObj = object .assign({}, obj, { valor: 42 })
31. . . .
32. const fruits = [ 'Maça', 'Abacaxi' ] const newFruits = [ ...fruits, 'Laranja' ]
33. Function Expression
34. function add (x) { return x + 1 }
35. const add = function (x) { return x + 1 }
36. const add = function (x) { return x + 1 } const doubleAndAdd = function (x) { return add(x) * 2 }
37. Funções de primeira classe (high order functions)
38. High Order Functions Podem recebem uma ou mais funções como argumento. Podem retornar funções.
39. map / filter / reduce > for
40. for function add(arr) { let results = [] for(let i = 0; i < arr.length; i++) { results.push(arr[i] + 1) } } <- Muta o array <- Muta o i
41. Todo for pode ser substituído por um map, filter ou reduce.
42. map 1 2 3 2 3 4 add(x)
43. Map const add = x => x + 1 const arr = [1, 2 ,3] const res = arr.map(add) //[2, 3, 4]
44. filter 1 2 3 isEven(x) 2
45. filter const isEven = x => x % 2 == 0 ? true : false const arr = [1, 2 ,3] const res = arr.filter(isEven) // [2]
46. reduce 1 2 3 sum(x) 6
47. reduce 1 2 3 sum(x) 6 const sum = (sum, value) => sum + value [1, 2, 3].reduce(sum)
48. reduce 1 2 3 sum(x) 7 const sum = (sum, value) => sum + value [1, 2, 3].reduce(sum, 1)
49. reduce const matrix = [ [0, 1], [2, 3], [4, 5] ] const flatten = (arr, value) => arr.concat(value) const flattened = matrix .reduce(flatten, []) // [0, 1, 2, 3, 4, 5]
50. MAP FILTER REDUCE food = [ ] (food, fry) => [ , , ] (food, isVeggie) => [ ] (food, eat) =>
51. Não mutam o array retornam um novo [1, 2, 3].map(add) // [2, 3, 4]
52. Declarativo
53. Não programação imperativa descrevemos COMO queremos algo enquanto na declarativa é mais O QUE deve ser feito.
54. suponto que eu um pedaço de bolo da geladeira...
55. Colocar no prato Ir pra cozinha Abrir a geladeira Pegar o bolo Cortar bolo
56. Eu quero um pedaço de bolo
57. supondo que eu quero a soma dos valores + taxa de 10% que são maiores que 500.
58. let results = [] for (let i = 0; i < arr.length; i++) { withTax = arr[i] * 0.1 if (withTax > 500) { results.push(arr[i]) } } let sum = 0 for (let i = 0; i < results.length; i++) { sum += results[i] return results }
59. arr .map(res => res * 0.1) .filter(res => res > 500) .reduce((acc, res) => acc + res, 0)
60. Curry / Partial Application
61. const add = x => y => x + y const add10 = add(10) // função const add10(5) // 15
62. NÃO USE CLASS não use new não use this não use getters and setters
63. Modularizar em pequenas funções o que precisa ser resolvido.
64. Js não garante imutabilidade. Não 100% é puro. PRÓS CONTRAS Mais testabilidade. Reduz erros e bugs. Mais legível. Lida melhor com o estado da sua aplicação.
65. http://ramdajs.com/repl/ https://github.com/fantasyland/fantasy-land https://facebook.github.io/immutable-js/ https://github.com/jfmengels/eslint-plugin-fp
66. proposal pattern matching proposal pipeline operator
67. recursion currying aridade composition
68. Desafio! tinyurl.com/desafiofuncionalcastelo
69. Obrigada!