Learning Functional Programming with JavaScript

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

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