Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Learning Functional Programming with JS @AnjanaVakil
Slide 2
Slide 2 text
The Recurse Center https://www.recurse.com/
Slide 3
Slide 3 text
What is functional programming?
Slide 4
Slide 4 text
What is functional programming? a programming paradigm
Slide 5
Slide 5 text
What is functional programming? a coding style
Slide 6
Slide 6 text
What is functional programming? a mindset
Slide 7
Slide 7 text
What is functional programming? a sexy, buzz-wordy trend
Slide 8
Slide 8 text
Why functional JavaScript?
Slide 9
Slide 9 text
Why functional JavaScript? object-oriented JS gets tricky (prototypes? this?!?)
Slide 10
Slide 10 text
Why functional JavaScript? safer, easier to debug/maintain
Slide 11
Slide 11 text
Why functional JavaScript? established community
Slide 12
Slide 12 text
OK, let’s do it!
Slide 13
Slide 13 text
OK, let’s do it! ...how?
Slide 14
Slide 14 text
Do everything with functions input -> output
Slide 15
Slide 15 text
Not functional: var name = “Anjana”; var greeting = “Hi, I’m ”; console.log(greeting + name); => “Hi, I’m Anjana”
Slide 16
Slide 16 text
Functional: function greet(name) { return “Hi, I’m ” + name; } greet(“Anjana”); => “Hi, I’m Anjana”
Slide 17
Slide 17 text
Avoid side effects use “pure” functions
Slide 18
Slide 18 text
Not pure: var name = “Anjana”; function greet() { console.log(“Hi, I’m ” + name); }
Slide 19
Slide 19 text
Pure: function greet(name) { return “Hi, I’m ” + name; }
Slide 20
Slide 20 text
Use higher-order functions functions can be inputs/outputs
Slide 21
Slide 21 text
function makeAdjectifier(adjective) { return function (string) { return adjective + “ ” + string; }; } var coolifier = makeAdjectifier(“cool”); coolifier(“conference”); => “cool conference”
Slide 22
Slide 22 text
Don’t iterate use map, reduce, filter
Slide 23
Slide 23 text
http://www.datasciencecentral.com/forum/topics/what-is-map-reduce
Slide 24
Slide 24 text
Avoid mutability use immutable data
Slide 25
Slide 25 text
Mutation (bad!): var rooms = [“H1”, “H2”, “H3”]; rooms[2] = “H4”; rooms; => ["H1", "H2", "H4"]
Slide 26
Slide 26 text
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"]
Slide 27
Slide 27 text
Persistent data structures for efficient immutability Mori, Immutable.js
Slide 28
Slide 28 text
Ready to try it out?
Slide 29
Slide 29 text
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!
Slide 30
Slide 30 text
Want to learn more?
Slide 31
Slide 31 text
“An introduction to functional programming” by Mary Rose Cook https://codewords.recurse.com/issues/one/an-introduction-to-functional-programming
Slide 32
Slide 32 text
Thanks for listening! I’m @AnjanaVakil Huge thanks to: JSUnconf organizers Diversity sponsors The Recurse Center & alums