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

JavaScript Funcional

JavaScript Funcional

JavaScript é uma linguagem muito flexível. Você já deve estar acostumado a passar funções como argumentos, ou retorná-las como resultados de chamadas de outras funções. Mas já pensou em fazer das funções a sua principal abstração de código? Nesta palestra vamos ver como usar o JavaScript em uma abordagem funcional pode facilitar o fluxo de desenvolvimento e deixar para traz operações baseadas em loops.

Palestra apresentada na QCon SP 2014

Nando Vieira

April 10, 2014
Tweet

More Decks by Nando Vieira

Other Decks in Programming

Transcript

  1. function A() { function B() { console.log("B executed"); } !

    console.log("A executed"); B(); } ! A(); // A executed // B executed
  2. var numbers = [1, 2, 3, 4, 5]; ! for

    (var i = 0; i < numbers.length; i++) { console.log(numbers[i]); }
  3. var users = [ {name: "John Doe"} , {name: "Mary

    Doe"} ]; var names = []; ! for (var i = 0; i < users.length; i++) { names.push(users[i].name); }
  4. var sales = [{revenue: 1000}, {revenue: 2000}]; var totalSales =

    0; ! for (var i = 0; i < sales.length; i++) { totalSales += sales[i].revenue; }
  5. var users = [{age: 24}, {age: 45}, {age: 13}]; var

    allowedToDrink = []; ! for (var i = 0; i < users.length; i++) { if (users[i].age >= 18) { allowedToDrink.push(users[i]); } }
  6. var users = [ {name: "John Doe"} , {name: "Mary

    Doe"} ]; ! var names = users.map(function(user){ return user.name; });
  7. var users = [ {name: "John Doe"} , {name: "Mary

    Doe"} ]; ! var names = users.map(attr("name"));
  8. var users = [{age: 24}, {age: 45}, {age: 13}]; !

    var allowedToDrink = users.filter(function(user){ return user.age >= 18; });
  9. var sales = [{revenue: 1000}, {revenue: 2000}]; var revenues =

    sales.map(attr("revenue")); ! var totalSales = sales.reduce(function(buffer, revenue){ return revenue + buffer; }, 0);
  10. var sales = [{revenue: 1000}, {revenue: 2000}]; var totalSales =

    sales .map(attr("revenue")) .reduce(add, 0) ;
  11. Exemplo Dada uma lista de pessoas, ordene-a pelo nome e

    renderize cada item como um conteúdo HTML.
  12. var users = [ {name: "John Doe", age: 42} ,

    {name: "Mary Doe", age: 37} , {name: "Eddie Doe", age: 24} ];
  13. function UserView(user) { this.user = user; } ! UserView.prototype.render =

    function() { return "<tr><td>" + this.user.name + "</td>" + "<td>" + this.user.age + "</td></tr>" ; };
  14. var html = ""; var view; ! for (var i

    = 0; i < ordered.length; i++) { view = new UserView(ordered[i]); html += view.render(); }
  15. function UserView(user) { this.user = user; } ! UserView.prototype.render =

    function() { return "<tr><td>" + this.user.name + "</td>" + "<td>" + this.user.age + "</td></tr>"; }; ! var ordered = users.sort(function(a, b){ return (a.name < b.name ? -1 : 1); }); ! var html = ""; var view; ! for (var i = 0; i < ordered.length; i++) { view = new UserView(ordered[i]); html += view.render(); }
  16. function UserView(user) { this.user = user; } ! UserView.prototype.render =

    function() { return "<tr><td>" + this.user.name + "</td>" + "<td>" + this.user.age + "</td></tr>"; }; ! var html = users .sort(function(a, b){ return a.name > b.name ? 1 : -1; }) .map(function(user){ return new UserView(user); }) .map(function(view){ return view.render(); }) .join("\n") ;
  17. function asc(attribute) { return function(a, b) { return a[attribute] >

    b[attribute] ? 1 : -1; }; } ! function desc(attribute) { return function(a, b) { return a[attribute] > b[attribute] ? -1 : 1; }; } ! users.sort(asc("name"));
  18. for-loop functional pure functions DOM 0 300,000 600,000 900,000 1,200,000

    37,543 193,477 204,795 1,105,783 Ops/second (maior é melhor) http://fnando.me/10i
  19. var callRender = call("render"); var wrapView = wrapWith(UserView); var render

    = compose(callRender, wrapView); ! users .sort(asc("name")) .map(render) .join("\n") ;
  20. “Às vezes a implementação mais elegante é uma função. Não

    é um método. Não é uma classe. Não é um framework. É apenas uma função. — John Carmack