$30 off During Our Annual Pro Sale. View Details »

Learning Functional Programming with JavaScript

Learning Functional Programming with JavaScript

Given at JSUnconf 2016 (http://2016.jsunconf.eu/)

Anjana Sofia Vakil

April 24, 2016
Tweet

More Decks by Anjana Sofia Vakil

Other Decks in Programming

Transcript

  1. Learning Functional
    Programming with JS
    @AnjanaVakil

    View Slide

  2. The Recurse Center
    https://www.recurse.com/

    View Slide

  3. What is functional programming?

    View Slide

  4. What is functional programming?
    a programming paradigm

    View Slide

  5. What is functional programming?
    a coding style

    View Slide

  6. What is functional programming?
    a mindset

    View Slide

  7. What is functional programming?
    a sexy, buzz-wordy trend

    View Slide

  8. Why functional JavaScript?

    View Slide

  9. Why functional JavaScript?
    object-oriented JS gets tricky
    (prototypes? this?!?)

    View Slide

  10. Why functional JavaScript?
    safer, easier to debug/maintain

    View Slide

  11. Why functional JavaScript?
    established community

    View Slide

  12. OK, let’s do it!

    View Slide

  13. OK, let’s do it!
    ...how?

    View Slide

  14. Do everything with functions
    input -> output

    View Slide

  15. Not functional:
    var name = “Anjana”;
    var greeting = “Hi, I’m ”;
    console.log(greeting + name);
    => “Hi, I’m Anjana”

    View Slide

  16. Functional:
    function greet(name) {
    return “Hi, I’m ” + name;
    }
    greet(“Anjana”);
    => “Hi, I’m Anjana”

    View Slide

  17. Avoid side effects
    use “pure” functions

    View Slide

  18. Not pure:
    var name = “Anjana”;
    function greet() {
    console.log(“Hi, I’m ” + name);
    }

    View Slide

  19. Pure:
    function greet(name) {
    return “Hi, I’m ” + name;
    }

    View Slide

  20. Use higher-order functions
    functions can be inputs/outputs

    View Slide

  21. function makeAdjectifier(adjective) {
    return function (string) {
    return adjective + “ ” + string;
    };
    }
    var coolifier = makeAdjectifier(“cool”);
    coolifier(“conference”);
    => “cool conference”

    View Slide

  22. Don’t iterate
    use map, reduce, filter

    View Slide

  23. http://www.datasciencecentral.com/forum/topics/what-is-map-reduce

    View Slide

  24. Avoid mutability
    use immutable data

    View Slide

  25. Mutation (bad!):
    var rooms = [“H1”, “H2”, “H3”];
    rooms[2] = “H4”;
    rooms;
    => ["H1", "H2", "H4"]

    View Slide

  26. No mutation (good!):
    var rooms = [“H1”, “H2”, “H3”];
    Var newRooms = rooms.map(function (rm) {
    if (rm == “H3”) { return “H4”; }
    else { return rm; }
    });
    newRooms; => ["H1", "H2", "H4"]
    rooms; => ["H1", "H2", "H3"]

    View Slide

  27. Persistent data structures
    for efficient immutability
    Mori, Immutable.js

    View Slide

  28. Ready to try it out?

    View Slide

  29. FP libraries for JS
    ● Mori (http://swannodette.github.io/mori/)
    ● Immutable.js (https://facebook.github.
    io/immutable-js/)
    ● Underscore (http://underscorejs.org/)
    ● Lodash (https://lodash.com/)
    ● Ramda (http://ramdajs.com/)
    ● ...and more!

    View Slide

  30. Want to learn more?

    View Slide

  31. “An introduction to functional
    programming”
    by Mary Rose Cook
    https://codewords.recurse.com/issues/one/an-introduction-to-functional-programming

    View Slide

  32. Thanks for listening!
    I’m @AnjanaVakil
    Huge thanks to:
    JSUnconf organizers
    Diversity sponsors
    The Recurse Center & alums

    View Slide