 Hello, I'm Rebecca Murphy and I'm a JavaScript developer at Boku and in this video we'll take a look at how we can refactor a function that's trying to do too many things at once. Here's a function that is trying to do too many things and we can tell that it's trying to do too many things because it takes a whole lot of arguments. It's actually taking six arguments in order to figure out what needs to happen inside of the function and there's no hard and fast rule about how many arguments a function should or shouldn't take but six is almost certainly too many. So if you look at this function you can also tell that it's kind of hard to follow. It's hard to figure out what all is going on in here and of course if we read it line by line we can sort it out but it's not easy to tell at a glance what's happening and that doesn't mean that you're not good at reading JavaScript. That means that this code was actually not well written if you can't read it fairly quickly. The other indication we have that this might be a bad function is it's 33 lines long and again there's no hard and fast rule about how long a function should be but probably shorter than that if you want it to be something that you can follow along and safely maintain and change without having any sort of unintended consequences. So if we do dig into this function and figure out what it's doing we can tell that it's taking its first argument is a row in a table and that it's looking in that row to find the first column and the second column and storing those in a variable and then it goes through some some gymnastics based on those other five arguments that were passed in in order to figure out the contents of each of those two columns and so it in some cases it sets the contents of the second column to an image tag in other cases it does some more complex figuring about how to set both the first and the second column and the logic for the first and second column is all mixed up with each other and there are different places where we're doing the same thing so we're setting discount call HTML here we're also setting it here and so you have to do a lot of reading in order to realize that that one of those will happen and one of them won't depending on different conditions so let's take a look at how we might rewrite this so over here I've got a version of this that is a whole lot easier to follow I hope and what we've done here is actually a number of things number one rather than having that price information in five different arguments we've created a price info object and we can put all the properties on that that we want so we can have an is prurated property on that and we can add other properties too so if we're expecting a discount price property or a standard price property we can put all of those on the price info object rather than having those as individual individual arguments where that becomes useful is that we're going to create a function called get price that gets the HTML that we're going to put into the price column and we're going to create a function called get discount that gets the HTML that we're going to put into the discount column and we're going to do both of those things completely separately from actually updating the price column and the discount column so this is the concept of encapsulation we're encapsulating related functionality instead of a function and we're decoupling the unrelated functionality so updating the HTML isn't really related to figuring out what the HTML is and separating those two concepts makes for much cleaner code and code that's a lot easier to work with and maintain so we know from our old code that both the HTML for the price column and the HTML for the discount column is based on those five other arguments and so what we do like I said is package those arguments into a single object and we pass that object to both get price and get discount and we'll take a look at the the contents of those functions in just a minute but what's neat about this approach is that the details of those functions don't really matter you know of course we need to have the right logic in there but all that we care about ultimately is that they each return us some HTML and then we're going to create a new update row function that once again takes the row as its first argument but then rather than taking five additional arguments it's just going to take two additional arguments the HTML for the price column and the HTML for the discount column both of which we figured out using these other two functions up here so looking briefly we can see here's our get discount function it gets the price info that we pass in and then we use that price info to come up with these string of HTML that we're going to return and so in some cases we build up this string of HTML if we have all of these properties on the price info object if they're all defined and in another case we just return the image tag and again what's important here is that we haven't actually touched our document at all we've only generated this string which we then return same thing with the get price function it does some very simple calculations based on that same price info object and looks at its properties and returns a value depending on what's found in those properties again not messing with the page at all finally our update row function gets really simple it just finds the right column for the price HTML and finds the right column for the discount HTML and throws them into the page and that's the end of that so we've gone from this really complex and difficult to follow function it's really trying to do too many things at once and was called sometimes using this incredibly nasty signature and instead we've gone to these three separated functions that nicely encapsulate in small pieces of functionality and don't depend on each other and we use them together to achieve the same effect thanks for watching I'm Rebecca Murphy and this was a Boku training production