 Hi, I'm Rebecca Murphy from Boku, and in this video I want to talk about how you can use functions to reduce the repetitiveness of your code. So this is the code that we'll work with, and its job is pretty simple. It uses the date from a date picker to update three different regions on the page, the day, month, and year region, and then it uses a date from an end date picker to update three other regions on the page, again the day, month, and year. And it's pretty easy to see that this code is really quite repetitive, so these three lines are a whole lot like these three lines, and really all that changes is in these three lines we're working with menu item one, and we're using the start date for our date picker, and in these three lines we're working with menu item two, and we're using the end date as the source of our date information. In both cases, all we're doing is getting a date from the date picker, and then updating these three regions using that date. And all that changes is which date picker we use, and which regions we're updating. So when you have a case where you've got really similar code, but just a couple of things are changing, this is a great opportunity to use a function to dry out your code, so dry means don't repeat yourself. So let's take a look at how we could do that. We will make a new version of this update dates function, and in that the first thing we'll do is pretend that we've already written the function that we're going to write. So we'll say that we're going to create a function called update regions, and we want to update the first region using the start date, date picker, and we want to update menu item one. And then we want to update the second region using the end date date picker, and we want to update menu item two. So now what we have to do is actually write this update regions function. So what we're going to do is pass that update regions function to different arguments. We're going to pass it the date picker element that we're going to use as the source information and the target element that's the region that we want to update. First we'll get the date out of that date picker element. So we'll use jQuery to select the element and then ask the date picker to get the date. And then second we'll get a handle on that target element again using jQuery. So now we have those two things that change and we have them in a useful waste that we can work with them. And all that's left to do is to actually do that work of updating those three different regions. So let's copy this stuff from up above and we'll paste it in down here. And now instead of this, instead of making this selection three different times, we can use that target that we found up above. And we can say that we want to target find and we want to find the day, month, and year. And then we want to update that not using the end date, but using this generic date variable that we just set up here. So with that little change, we haven't really reduced the length of our code, but we have dried it out tremendously. We have made it so that we aren't repeating ourselves like we were up here, saying almost exactly the same thing two times. We've wrapped that up in a function, and we're just saying it once. And the neat thing about this is that if we have another case in our application where we need the same relationship between a date picker and then a date, month, and year or day, month, and year region on the page, we can just use this update regions function to do that. Whereas in the past, we might have just copied this and adjusted what we needed to adjust. Now we can just use that update regions function any time that we need that relationship. Thanks for watching. I'm Rebecca Murphy, and this was a Boku training production.