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

Cb5d9e9095cd41b636764a85e57ade4b?s=128

Nando Vieira

April 10, 2014
Tweet

Transcript

  1. 6.
  2. 21.

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

    console.log("A executed"); B(); } ! A(); // A executed // B executed
  3. 26.

    var numbers = [1, 2, 3, 4, 5]; ! for

    (var i = 0; i < numbers.length; i++) { console.log(numbers[i]); }
  4. 28.

    var users = [ {name: "John Doe"} , {name: "Mary

    Doe"} ]; var names = []; ! for (var i = 0; i < users.length; i++) { names.push(users[i].name); }
  5. 30.

    var sales = [{revenue: 1000}, {revenue: 2000}]; var totalSales =

    0; ! for (var i = 0; i < sales.length; i++) { totalSales += sales[i].revenue; }
  6. 32.

    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]); } }
  7. 38.

    var users = [ {name: "John Doe"} , {name: "Mary

    Doe"} ]; ! var names = users.map(function(user){ return user.name; });
  8. 42.

    var users = [ {name: "John Doe"} , {name: "Mary

    Doe"} ]; ! var names = users.map(attr("name"));
  9. 44.

    var users = [{age: 24}, {age: 45}, {age: 13}]; !

    var allowedToDrink = users.filter(function(user){ return user.age >= 18; });
  10. 46.

    var sales = [{revenue: 1000}, {revenue: 2000}]; var revenues =

    sales.map(attr("revenue")); ! var totalSales = sales.reduce(function(buffer, revenue){ return revenue + buffer; }, 0);
  11. 51.

    var sales = [{revenue: 1000}, {revenue: 2000}]; var totalSales =

    sales .map(attr("revenue")) .reduce(add, 0) ;
  12. 52.

    Exemplo Dada uma lista de pessoas, ordene-a pelo nome e

    renderize cada item como um conteúdo HTML.
  13. 54.

    var users = [ {name: "John Doe", age: 42} ,

    {name: "Mary Doe", age: 37} , {name: "Eddie Doe", age: 24} ];
  14. 58.

    function UserView(user) { this.user = user; } ! UserView.prototype.render =

    function() { return "<tr><td>" + this.user.name + "</td>" + "<td>" + this.user.age + "</td></tr>" ; };
  15. 60.

    var html = ""; var view; ! for (var i

    = 0; i < ordered.length; i++) { view = new UserView(ordered[i]); html += view.render(); }
  16. 62.

    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(); }
  17. 64.

    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") ;
  18. 66.

    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"));
  19. 71.

    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
  20. 76.

    var callRender = call("render"); var wrapView = wrapWith(UserView); var render

    = compose(callRender, wrapView); ! users .sort(asc("name")) .map(render) .join("\n") ;
  21. 96.

    “À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