Programação Funcional e o JavaScript

* Palestra feita com o @rafael_sps

Programação Funcional é um paradigma bastante em voga nos dias de hoje. O conceito é bastante antigo, vem lá do Lisp, e é embasado em cima de avaliações de funções matemáticas. Discutiremos os conceitos da Programação Funcional, suas "regras de ouro" e algumas das funções mais úteis utilizando JavaScript.

Transcript

1. Programação Funcional e o JavaScript
2. Quem somos - Rafael Specht da Silva (@rafael_sps) Desenvolvedor Web Freelancer - Evandro Leopoldino Gonçalves (@evandrolg) Engenheiro de Software, Grupo RBS
3. Programação Imperativa vs Programação Funcional
4. Imperativa - Variáveis/Estados mutáveis. - Comandos sequenciais. - Estruturas de controle, como if-then-else, loops, break, continue, return.
5. Funcional - Estruturas de controle e operações abstraídas como funções. - Variáveis e estados imutáveis. - Uso de funções que dependem apenas dos valores passados por parâmetro, e não do estado da aplicação. - Uso de funções que abstraem outras funções.
6. Benefícios - Melhor modularidade. - Menos sujeito a efeitos colaterais.
7. Funções em JS São funções de primeira classe ou “Podemos fazer com funções o que poderíamos fazer com números”
8. var two = function() { return 2; };
9. var a = 2; var b = two;
10. var twos = [2, two]; var twosObj = { two: 2, otherTwo: two };
11. var sum = function (a, b) { return a + b(); } sum (4, two); //6
12. var giveMeTwo = function() { return function() {return 2;}; }; var two = giveMeTwo(); 2 + two(); //4
13. Exemplos
14. Currying "Usada para transformar uma função com n argumentos em uma outra função com argumentos simples." (Milfont)
15. function pow(i, j) { return Math.pow(i, j); } function square(k) { return pow(k, 2); }
16. Callback Consiste em passar a função como parâmetro para outra função que mais tarde executará a função recebida.
18. var bt = document.getElementById('bt'); var onClick = function() { console.log(‘clicked’, this); }; onClick() // ‘clicked’ [object Window] bt.addEventListener('click', onClick, false); // ‘clicked’ [object HTMLSelectElement]
19. Callback - https://github.com/EvandroLG/Feed/blob/master/src/feed.js
20. Closures - É uma inner function que acessa também as variáveis e parametros da função pai. - Callbacks podem ser closures também!
21. Closures - https://gist.github.com/rssilva/77206b38cd22b45293aa - https://github.com/EvandroLG/P/blob/master/src/p.js
22. Self-Memoizing Function É uma técnica que consiste em projetar uma função capaz de cachear valores já retornados
23. var getElement = function(val) { return getElement.cache[val] = getElement.cache[val] || document.getElementById(val); }; getElements.cache = {}; http://jsperf.com/dom-case-perf
24. Funções Úteis
25. Map Cria um novo array onde cada item sofre uma transformação de acordo com o retorno da função passada.
26. var updatePath = function(listScripts, path) { return listScripts.map(function(value) { return path + value; }); }; var scripts = ['script-1.js', 'script-2.js', 'script-3.js']; updatePath(scripts, ‘scripts/’); //[‘scripts/script-1.js’, ‘scripts/script-2.js’, ‘scripts/script-3.js’]
27. var convertObjToArray = function(obj) { return [].map.call(obj, function (element) { return element; }); }; var box = document.querySelectorAll('.box'); var listBox = turnObjToArray(box);
28. Reduce Retorna um único valor através da redução dos valores do array
29. [0,1,2,3,4].reduce( function(previousValue, currentValue) { return previousValue + currentValue; } ); // 10
30. Filter Cria um novo array com todos os valores que passam no teste da callback
31. ['script-1.js', 'style.css', 'script-2.js']. filter(function(val) { return val.indexOf('.js') !== -1; }); // ['script-1.js', 'script-2.js']
32. var boxes = document.querySelectorAll('.box'); var list = [].map.call(boxes, function(value) { return value; }); var redBoxes = list.filter(function(el) { return el.className.indexOf('red') !== -1; });
33. Find Retorna o primeiro valor que passa no teste da callback
34. Where Itera um array retornando um array de itens que tem os mesmos valores do objeto passado como parâmetro
35. var listOfPlays = [ {title:‘Cymbeline’, author: ‘Shakespeare’, year: 1611}, {title: ‘The Tempest’, author: ‘Shakespeare’, year: 1611}, {title: ‘Macbeth’, author: ‘Shakespeare’, year: 1623}]; _.where(listOfPlays, { author: ‘Shakespeare’, year: 1611 });
36. //_.where retorna: [{title:‘Cymbeline’, author: ‘Shakespeare’, year: 1611}, {title: ‘The Tempest’, author: ‘Shakespeare’, year: 1611}]
37. Pluck Extrai uma lista de propriedades
38. var stooges = [ {name: ‘moe’, age: 40}, {name: ‘larry’, age: 50}, {name: ‘curly’, age: 60} ]; _.pluck(stooges, ‘name’); // [‘moe’, ‘larry’, ‘curly’]
39. Libs fn.js bacon.js underscorejs lodash
40. Temos oportunidades na RBS ananda.armani@gruporbs.com.br
41. Perguntas?