A Skeptics Guide To Functional STYLE JavaScript

you've been hanging around the JavaScript community for any length of time at all you've probably heard about functional programming and the functional stylish JavaScript and it is the only way that you should be writing your Java the problem with that is I'm the guy who has an oo P for design patterns in JavaScript course and I'm reluctant to board the functional programming train for a lot of reasons better I might talk to somebody I get this statement in JavaScript functions are first class objects have you heard this before yes you know what my response to this is functions are first class objects it's right there in the phrase right so so there's a lot of benefits here but and we're not pure oo I know you can throw tomatoes at me later but prototypal inheritance all that stuff but I like the object-oriented stuff and and so I kind of had to get on board with this idea so the first thing I want to do just real quick is let's set the groundwork for what is functional programming and the best source always to find definitions for anything is Wikipedia okay so wikipedia says this in computer science functional programming is a programming paradigm we're all on the same page ok a style of building the structured elements of computer programs totally still cool right up until we get to this the trees computations as the evaluation of mathematical functions so I I was a math major in college and in my freshman year I took Cal 3 and then I switched over to computer science cuz I don't like math I it's just right there I'm not happy but it ends with this statement and if you've been doing JavaScript for any length of time and avoids changing state and mutable data in JavaScript like we can't even keep our types the same let alone the data involved in the variables so it just it doesn't work to me so so this is why the the talk is called functional style so functional programming in JavaScript is not a thing right functional programming in Erlang or you know high school yeah that's fine function programming javascript doesn't exist but we can apply a functional style that might help us get a little better what's interesting is every time I talk to people about this oh wait hold on so Martin who created Scala says this the programmers in that segment like functional programming because it makes code clearer better structured and prevents many class of classes of errors the interesting thing about this last phrase prevents many classes of errors is because functional programming languages have what is called a compiler that if you're doing things you shouldn't be able to do it actually says stop it's JavaScript does not do that if you change something that's immutable in JavaScript it just changes it okay it just works so every time I talk to a functional programmer or a functional style JavaScript programmer I get this phrase and you even heard it in the introduction right pure functions are awesome my question is always back why and and I was having lunch with a guy in in Kansas City and his phrase was because they're pure I how can you argue with that but pure functions are beautiful why when you can get a function to be pure it's like this magical thing okay side effects are evil how many of you want to interact in IO in any way right you obviously do so that's a side effect right I would contend the interacting with the IO is not an evil thing and I'm not alone the problem it a lot of people they talk about how awesome functional programming is but they can't articulate why but I had a conversation not too long ago with this guy so if you're going to tweet at any point tweet at may Taylor and say hey I'm a Taylor thanks for straightening John I haven't he's a he's a lecture guy and we were talking about functional programming and and he's like yeah you're thinking about this too hard which I found very interesting because the bit flipped for me in a very interesting way when I started thinking about this so think about this for just a second you cannot a fool avoid side effects period you can't because you have to interact with IO right you've got to do some things not all functions are pure because if you can't avoid side effects not all your functions can't be pure and not everything has to be immutable however functional style this was this is what he said that that changed fundamentally my understanding of this function style is about using less brain power and making things simple is that your understanding of functional style programming like coming into this talk you have to think less and things are easier like that is not that doesn't go with what we've been told right but I am telling you as the guy who hates functional programming because I'm an Opie guy this clicked for me I'm going to give you some examples of why but but here's the thought functional style is about small composable things that fit together a lot of times it's goodbye a style of building the structure and elements of a computer programming more importantly the style of building the elements we're going to talk about how we build elements in a functional style that fit in the overall big picture as ob developer I think of system right you've got system thinking you're trying to think of the whole big thing and then you think about what your objects are you think about how your objects interact you think about all of these different things are you thinking about the big picture what sometimes we forget about and we don't stop and think about very clearly is the little picture the two lines of code here and there that potentially could cause us problems or make us think harder than we need to think and the reality is you've got to think about both so what I'm gonna do is we're gonna walk through some code right we'll just walk through some code and I'll kind of give you some examples of how this works and then we can talk about it a race how many of you use a race in your programming if if there's not a lot of you than you're lying okay how many of you are morally opposed to hand-raising so I got more here usually I get one Cori I had four so you don't have to raise your hand for the whole rest of the talk but the rest of you I expect feedback okay so you use a race so if you want to do something with an array not just in JavaScript but across the board we use this thing called the for loop how many of you have ever written a for loop yes okay so I'm just making sure we're all on the same page right so how many of how many of you have seen code that looks like this so I've got a list of numbers and I put a comment in there so my next question will be easy like what's gonna print out in my console log just yes you're not gonna be wrong I promise but you're thinking about this pretty hard what's it gonna be two through six two three four five six and how do you know this how do you know this to be true right so I'm looping over the array for each item in the list I'm adding 1 to it and you could just read the comment if you really want to and then console dot log list and I have this the interesting thing about this or this is a very simplified example of things that become very complicated very quickly but so the the idea here that was you've got two things you're trying to pay attention to right here the two things you're trying to pay attention to right here are this the iteration code I've got code that governs the iteration over my array and then I have code that governs what I'm doing with my array so I've got these two things that are very tightly coupled I've got it a race got what we could what if we could start to pull this stuff apart so that I don't have to pay attention to multiple things at one time and that's ultimately where we want to get to with functional programming functional style programming is I don't want to think about more than one thing at any given time I'd only think about one thing that's pure it's self-contained to nothing else and that's it okay so here's what we're gonna do in JavaScript we have these cool little functional style helpers for Java for a race so list out Mac what is map dude right what does map do it ultimately it iterates over in a row and then applies a function to it isn't that ultimately kind of what this was doing right I'm iterating over an array so what if I told you you never had to write a for loop again yeah that's kind of where we're getting right you'd stop it write list stop map will iterate and there's a bunch of these there's let's not find and let's stop reduce and we'll talk about reduce here in just a minute there's all of these cool little helper things and then you just pass into it a function so this is now our iteration code this looks a little bit better than what we had before so what were we doing with each item we're adding one generally you're doing more than that right but I don't want to have to explain a whole lot of code to get you the idea so bear with me yes this is simplistic but we're adding one item to a list what we're going to do with map is we're now going to introduce this concept of a pure function I don't care if anything else in your code is a pure function this will be pure now what is a pure function real quick and computer science a function may be considered a pure function if both the following statements of the function hold true two things very important here one it always evaluates to the same result given the same arguments period no exceptions if you call this function with one and two you get the same result every time Phung and a bee that's a pure function math dot random pure function no why because it returns something different every time that's the whole purpose of math dot random don't go functional style on random because that doesn't work it's not what you want um the other thing for a pure function is this evaluation of the result does not cause any semantically observable side-effect or output such as output to i/o devices not everything's gonna be pure not everything has to be pure but in this case when you're mapping when you're doing a map over an array no side-effects don't start writing to i/o every time you map for a lot of different reasons but the most important one for this talk is because it's one more thing you've got to pay attention to and we don't want to have to pay attention to so let's sum equal zero function add a sum not a pure function this this requires more brain power to figure out what's going on because not everything's right there stuffs up above Brian we don't we don't want stuff up above all right so why pure less things to keep track of less brain power but most importantly it's not a rule you don't have to have it be pure but it's a good idea okay so here's what you end up with I have a pure function item return item plus one does that appear function yes is it clear what's going on yes however this is 2017 it's not like ten years ago we don't use the function keyword anymore now we do this right arrow functions over who uses arrow functions do you know why you use arrow functions ah okay that's fine I'm not gonna explain it because I don't have time but and then if you do this and Cori does your code review he says that's too many characters I want this because I don't need the parentheses and if it's only one line I don't need the return so right now this becomes much easier to read there you go I've replaced that big huge for-loop with just this little thing still maybe unclear I do not like anonymous functions anonymous functions especially in an FP style make things a little less clear so I created an add one function up above list up map add one it's very clear what's going on right can you guess is it easier for everybody to guess what list is gonna print out ah I'm getting there you ruined it but yes okay this this prints out that Y ah that's this avoid changing state and mutating data we don't in the functional style we don't mutate data Y so ok you some of you feel very confident so I'm gonna like ask you why don't we mutate data is it just one of those FP things like you know tail call recursions nobody wants to venture a gas multi-threading in java scripts this is where we're we're in Nebraska yes man just totally fair okay but here so here's why here's a couple of reasons I'm not going to go through them a lot but I just so enforces options this one I'm going to talk about easier to validate so react state is immutable you should treat state it was immutable that's a very important distinction because it's not actually immutable but and the reason for that is if you change an object's object a equals equals object B now becomes false if you add something to an object you're both inside of an object that still evaluates to true so you don't know whether this thing is changed without doing a deep compare most importantly less brain power for that reason and because you don't have to worry about what's going on with all of my stuff so here's what that looks like I have options here look I can just say list equals lists top map not that big a deal I'm adding like a couple of characters but if I don't want to change it i don't i just assign it to something else i have options available to me and how I'm gonna handle my a rep so that's very cool okay but what if we want to do multiple things at one time how many of you only do one thing in your for loop like now we do a lot of different things in our for loop all the time so let's add one and then sum them so look add one and then I'm gonna reduce my list so reduce what reduce does is it basically lets you aggregate down and a rag just over an array and basically does a sum or it can do an ADD or it could do a group buy or to do whatever you want to do but Val let's top map add one then reduce it to some I get 20 by returning the array instead of changing the array I can just chain this stuff out and actually written code recently that I had like four or five of these things and you just put the dot on the next line it's very readable it's very easy to see what's going on this right here is why I've started to really like the functional style because this is a lot cleaner once you kind of rock the idea this is a lot cleaner than the big four loops the big monolith the code that sits everywhere then you get to this thing because it's easy when you're talking about arrays and map and pure functions and all these things but then functional programming gets into into weird stuff like currying how many of you have heard this phrase before all right here's what currying does currying I have this function let's sum equal a plus B or a comma B I'm passing a and B in it's gonna pass me back to some currying in mathematics again it basically takes in a ret or a function that takes multiple parameters and breaks them up so you can pass one parameter into each function so this becomes this right I don't know why you would ever do that that's weird but here's that here's an example here's here's one of the reasons I use currying even recently at work in code so I have a list of buttons this is easier to explain mine was a list of dropdowns and you had drop-down so I've got a list of buttons that have a name and they have a message so ceated with a button so it should be easy - okay on click I have this done click and I want to display the message associated with the name how would I do this so when you click the button I'm gonna fire an on click event I want to know I want to display the message associated well in your on click event I've got a loop back over my buttons to figure out which button got clicked or I could add something to the Dom element or there's a bunch of different ways to do it they're all fairly more brain intensive what I really want to do is this I want to pass the index of my Dom element my button into the on call that I don't have to loop I just have my index is right there but what is the on click event handler past me can I change the ant handler no it's gonna pass me event no matter what I do but I think we just talked about something that might fix my problem right I want that so what you end up doing is hey I have a get on click event and my get on click event is gonna pass me back a function that has access to index now I don't have time to explain this closures all right I got one who knows what a closure is who can articulate it nicely okay that's all right no okay so here's here's in it's in a nutshell here's what a closure is when this function return' function event message equals buttons sub-index when that function is created JavaScript's takes everything that's in scope for that object and packages it all and hands it off so you're I'm not returning just the function I'm returning the function and the scope of that function that's a closure so what's in scope for that function index so index comes back that's part of it okay so that's that probably didn't help you at all but that's my explanation of what closures are so now I got on click event I'm creating a new function you can get into performance conversations I don't care this is easier so this is what I'm doing creating a new function now every time I the button I get exactly what I want all right so here's what I want to leave you with because I'm right at time I want to leave you with this idea that don't when you start writing functional style don't take a react app and say I need to convert this entire application to the functional style I need to kill everything that I have and now everything has to be immutable everything has to be pure functions because it's it's not possible you keep my web application in JavaScript that's purely functional what you can do is start taking these little building blocks of your code and start applying this this functional style and I've given you just enough to make you potentially interested you can go look at it there's a to clean up little pieces don't clean up the whole code base clean up this for loop right here or clean up this one other thing right here to make it a little cleaner a little nicer and easier okay so that's me thank you guys very much and if you've got questions or something we can chat how much [Applause]

Channel: Coding Tech

Views: 38,753

Keywords: functional programming, javascript, learn javascript, programming, software development, es6

Id: oF9XTJoScOE

Length: 22min 4sec (1324 seconds)

Published: Sat Oct 28 2017