Function composition in Javascript

oh hello hello friends sucks hot in here dog days summer but anyway so we're gonna talk about today's pretty confusing it's called a function composition in JavaScript so basically you can think about it as an analogy of an assembly line of functions that works on one piece of data so as a quick example let's say we have some data let's say that that's the number one what we want to do is multiply that by three and then multiply that by 4 and then multiply that by 5 so 1 times 3 is 3 3 times 4 is 12 12 times 5 is 60 so we would want to write a composed function that as we put in one bit of data does three different steps to it so we'll do this easy example first and then we'll do something a little bit harder to further solidify understanding of the topic all right let's go so let's just make a compose function first so cost composed equals and right here we'll pass in these will be three functions that will pass in for this easy example and then cons compose like that actually yes so like that and then we'll have our data right here and then we'll run these in such a way to where it'll be a runs B and C C gets the data so it will run C first and then that will run B in and they'll run a I'll explain as we go so Const let's make those three methods let's go mult by three and then that will take in and uhm and then that will simply return num times three and then let's copy this here let's change this to a four and then let's change this to a five so since we have a compose function up there we can make another another we can set the compose function equal to a variable oscilloscope Const get number and that will be equal to compose and so since we have three functions that can fit into this compose and we want to run C first so we want to go number of data times 3 data times for data times 5 to get our 60 so they will run in that way we have C B and then a so let's the way that you put these in is you would do them from left to right the way they were there so a would be mult 5 5 then mult by 4 then mult by 3 okay so that's that's our get number so let's go console dot log get number and we'll just run it with a 1 and this one is basically the data right here so we have x 3 x 4 x 5 and they will run here with this data which is this one that's passed in so let's save it and check it out come on their syntax errors oh I got a syntax error unexpected token let's take a look here right here x 5 no errors all right 60 so we get our 60 so basically just to reiterate what's happening here is it runs it's passed in data which is 1 1 this the C function here is multiplied by 3 so 1 times 3 is 3 and then B is the multiplied by 4 so 3 times 4 is 12 and then a times or well a would be multiplied by 5 5 times 12 is 60 and that's how we get 60 back now that's a very Picayune and be easy example let's do something a little bit harder let's think what's a quick algorithm we can do that takes two main steps all right I got it let's do the charm map function or the let's do the max character algorithm this is very common algorithm so it has two steps if you're passed in a string called hello world what you want to do is count up all the characters and see which one occurs the most within the given string right here looking at it you can see that it would be ill because it appears three times so let's figure out a way we can do that there are two steps to that one you have to make an object tree to keep count of the two key count of the letters why does it keep going to tree Walker that's three times in a row then the second thing that you have to do is loop through object and return highest count the key with the highest count you'll it'll make sense so let's make our compose function so Const compose and this one is going to only take two functions at first a and B and then here it's gonna get some data which will be a string and then here in the same way we'll go a B and B will have data okay so that's our compose function so let's make those two functions the first one we're gonna have to do is make an object out of the string so we'll go string to Bob that's what we'll call this function and then that will be passed in a string and then what do we want to do with that string we want to let op so we'll make an empty object and then so if you're looping over a string it's the fore of syntax so we'll go let our weight or let char of STR and then right here we can just go op at char is equal to objects char plus +1 or 1 object char is equal to object char plus 1 or 1 so what that'll do is make an object for us so we'll just return obstacle console dot log strange object er passed in and I'll make a STR right here hello world let's see if it makes it okay so it makes this object tree right here it's really just an object I don't know why I call it an object tree so it has one two three up you can see that L right here occurs three times so now we want to make a method or a function rather that loops over that object and then tells us which letter occurs the most amount of times so we'll go Const will call this get max and that's gonna equal this and it'll be passed in an object that we get from the function above as you can see it returns an object so we'll go let max equal zero at first and then we'll let result we'll just declare it and not assign it at first then what we want to do is loop over the object so that's for in instead of four of so for Lepke in Bob Leckie and ouch and then we'll go like if object key is greater than max then what we want to do is set max equal to Abdi and we want to set result equal to just the key and then we want to return result right so let's see that that works and the way that we can call that is like this which is basically function composition at its core we can go get max and then just put all this in there slurp alert and let's console.log that let's see we get actually I'm going to console.log up here the object so we can take a look at it all right let's take okay so it gives us our object back because we console.log it within that function and then it gives us L and if you look right here L occurs three times cool so this is working now it's in two separate functions right now and it's operating off the same bit of data we can use this compose function to chain those functions together so let's get after it so we can go Const we can just call this one get max letter which will be our our main variable so cost get get max letter equals composed with passed into it the two functions so we'll go get max and then string to object all right and then what we can do instead of calling all this mess down here we can call get max letter with STR passed in come on no whammies boom boom okay cool so it gives us the same thing we get the L right here and we're still console logging this object in that function from above but everything works so we've used our compose function to run two functions back-to-back now let's say we want to add another function we'll call this one Const add X X clam for adding an exclamation point just something easy to show you that we can add more functions to it and what we want this function to do is return the STR that's passed in plus just an exclamation point so we want to just add an exclamation point to it so since we're adding a function we would have to go to our compose function and add another function here and then we would have to add another function here all right so now that we have three functions there we would have to add it down here and X I called it X call come on man okay cool so let's see that this works if you notice right here we don't have an exclamation point in this object let's see if we get it in this one not that what the hell okay cool so we get it right here let me see something I had it a 1 an exclamation point here we go boom okay so you can see we did add an exclamation point and then we still got the L down here which is what we're looking for so basically the way this runs this adds an exclamation point plus exclamation point then the string with the exclamation point is ran and B which will turn into an object turn into object and then a which is the get max loops over the object and returns the most common character which will be that L and that is how we've done it so we've taken three functions put them in a compose function and then just put that in a variable and then we can just write it out like this and the the the data will run through each one of these functions so that's function composition you can build a lot more complicated stuff like that and it's very important to learn it might be a little bit tricky at first but just keep at it and you'll learn it over time and then put yourself in a better position all right take it sleazy

Channel: Adam Coder

Views: 2,128

Rating: 4.9259257 out of 5

Keywords: javascript, coding, programming, web development, function composing, function composition, javascript coding, javascript tutorial, code kata, functionial programming, functionial programming javascript, taylor swift

Id: obuOvsHVR4U

Length: 12min 16sec (736 seconds)

Published: Fri Sep 13 2019