Builder Pattern - Design Patterns

hello everybody kyle here from webdive simplified in this video i'm going to be talking about the commonly used pattern called the Builder pattern which is incredibly useful when you need to create objects that have many interlinking parts or many optional and required fields so let's get started now as I mentioned earlier this pattern is useful when you need to create objects that have many different working parts that need to all come together to create one single object in our example here we have two classes an address class and a user class and the user is the object that we want to create dynamically using a builder so this user it can have a name an age a phone number and an address and this address can have a zip code and a street now you can imagine that this user object could be much more complex it could have emails that could have passwords authentication tokens address could be more complex with like state country all that extra stuff so this is a really dumbed down version of what you could be using the Builder before but it's great for showing you why the Builder could be useful in our example here we have a user and really the only field that needs to be supplied is name age phone number and address are all really optional fields that the user can or may not have so if I run this real quick you'll see that we get a user printed out with the name of Bob and their address age and phone are all undefined which is perfect that's incredibly acceptable value for a user but what say we want to add an address to our user but we don't want to add an age or a phone number well now we need to go into this user object we need to pass in undefined both times here for the age and then again we need to pass an undefined for the phone and then finally we can create a new address object and let's just say we want to give it a zip of one in a street of Maine so now if we say that yesterday we get this user printed out and they have an address with is above one and a street of Maine and the age of phone number undefined but this is kind of complex this is really not very self-explanatory if all you saw was this new user line you don't know what undefined is setting you don't know this is the age or that this is the phone number so it's incredibly confusing to figure out what you're actually setting and you always have to write out these undefined and make sure everything's in the correct order in order to get this to work properly and if you can imagine you have any parameters to create a new user this new user statement can become incredibly long and filled with many different undefined that are confusing to you the programmer as to what they actually mean and that's where the builder comes in now there's two ways to do the Builder there's the traditional way to create the Builder which I'm going to cover first and then there's another way which is very much more JavaScript focused which i think is more advanced and cleaner looking and much better for JavaScript so make sure you stick around till the second part at the end of the video where I cover that JavaScript specifically but for now I'm going to cover first just the original way of doing this which is still completely valid at JavaScript so let's remove this user section down here and we need to create another class which is going to be a builder we're just going to call this class user builder and this user builder is going to take all the required parameters to create a user in our case just the name is the only parameter that we actually need to use to create a user so we have a constructor that takes a name and what this is going to do it's going to set user equal to a new user or try to pass that name parameter in there so all we're doing here is creating a user with the name that we need and we can actually remove all these extra parameters from this constructor up here for the user since we're only ever going to pass it the name with this builder and you're never actually going to use this user class to create users you're always going to use the builder down here so now what we need to do is actually create methods so we can set the age address and the phone number of the user so what we need to do is just come down here create a method we'll just call it set age it's going to take an age and all it's going to do is set the user's age so we'll just say this dot user dot age is equal to the age and then at the end we just want to return this which is just returning the builder back this will allow us to chain these methods together which we'll see when we start creating users so again we can just kind of copy this and paste it back down and we're going to do the phone for example so set phone it's going to take phone here and it's going to set user phone to phone and again return the Builder object and then finally we're going to have an address one we're just going to take an address and could we finish pasting that all down there we go now we've created the Builder for our user and we can actually use the builder but first we need to create a build method on this in order to create the user and return it so we'll just have a method here called build it'll take absolutely nothing I know don't return that user object so we can actually use the user object instead of having to use the builder so now we can come down here we can say our builder is going to be equal to a new user builder we pass it the name we want for example Bob and now we can just leave it this and call dot build and now we're going to actually have a builder so let's change this here to user and if we just log out that user you'll see that we get a user that has the name of Bob which is perfect that's exactly what we expected and then the other fields are set but what if we wanted to add those extra fields we could just say dot set age for example passes an age of 10 and if we say that we now see that we get an age of 10 and the name of Bob and the reason that we can just completely chain these together after each other is because we always are returning the same object back at the end of each of these set statements if we didn't new do this we would need to put these all in a new line instead of being able to chain them together so this is an easier way to write out these statements we can do the same thing for the phone number for example so let's say we want to set the phone I'm just gonna set it to a few ones if we say that you now see the phone number is also being inputted in there we can do the same thing for address and this allows you to dynamically create these objects however you want to without having to specify undefined for all the optional parameters that you don't actually want it also gives you a nice clean interface for setting the different properties of a user which makes it much easier to see what's going on in the code when you're reading it and this is the traditional way of creating a builder but it's not the only way to use a builder and JavaScript actually has a really nice way to implement builders for more simple objects in the case of this user for example so let's open that up right now we can get started by completely removing this builder class because we are no longer actually going to need it and all we're going to do is actually make changes to the user class itself so as we know we have this name parameter which is going to be required and we have a bunch of other parameters the phone number the age and the address which are optional an easy way to create optional parameters in JavaScript is to pass them as a JSON object or a JavaScript object at the very end a lot of times this will be label as options for example but with the newer features of JavaScript we're able to actually specify names for these different parameters rather than just pass them all in one JavaScript object so we can just create a JavaScript object of sorts inside of here by creating two curly braces and we just want to put the parameters that we want for example we want to have age we want to have phone and we want to have address and this will say that our last parameter which is going to be a javascript object is going to have the keys of age phone and address inside of it it may or may not have them but if that doesn't have them it'll just default them to undefined which is exactly what we want and then in the case we don't pass any of these we integers default this to an empty javascript object and this just says if we only pass a name and nothing else just pretend that we passed in just an empty javascript object as the second parameter instead of nothing and then we just need to use these so we just say this dot age equals age and this works just like we did before when we actually pass the parameters but instead now they are completely optional and they're going to be key value pairs so they're easier to see in the programming language so let's just finish this off with address and now let's talk about how we can actually use this user object so we can just say user it's going to equal a new user and we want to pass that name so in our case we'll use Bob again and then we just pass a JavaScript object with the different keys that we want so let's say we want to give it an age we'll just say age of 10 and if we save that or and we print it here so console dot log user and we print that you'll see that we get a name of Bob and age of 10 and the address and phone are undefined and that's because we actually passed this key of age which is defined up here in our constructor as age and it saves it to a user we can also add in address for example in here we can just pass in a new address and we'll just give it a zip of one again in a street of Maine and if you say that you see that our dress is also set with the correct zip and Street and we can even do the same thing with phone if we really want it to so we can just pass a phone number in there and save it and you see that the phone number is also being passed and the great thing about doing our constructor this way is we can use default values for these different optional parameters if we want so for example if we remove phone here resave it you'll see that we get undefined for our phone number but let's say we want a default all the phone numbers to be one two three four five six seven eight nine zero now if we save that you'll see that it is changing the phone number to one two three four five six seven eight nine zero if we don't pass it but if we do pass the phone number so for example if we make the phone number just a bunch of ones and save it you'll see that it sets the phone number to a bunch of ones so this is really convenient when we want to create these optional parameters but sometimes when you a want to have default values for them so it's incredibly useful for that certain scenario and when you have a simple Builder such as this user builder it's much easier to create a constructor like this it takes up much less code and I think that the code that you actually write to create the object is just as clean as the actual Builder implementation the only time a builder is actually better than this is if you have an incredibly complex object that has many many moving parts to it and in that case using a builder instead of a constructor would be beneficial since it allows you to break out that complex logic from the constructor and put it inside of the Builder object and that's all there is to creating a builder in JavaScript I hope you guys learn something about how to create a builder and why it'll be useful in your code to use these builders to clean up your complex constructors and object creations if you guys did enjoy this video please make sure to check out my other design pattern videos linked over here and subscribe to my channel for more videos just like this in the future thank you guys very much for watching and have a good day

Channel: Web Dev Simplified

Views: 57,671

Rating: 4.9691782 out of 5

Keywords: webdevsimplified, builder pattern, design patterns, builder design pattern, builder pattern javascript, builder design pattern javascript, javascript design patterns, javascript design patterns es6, build design pattern explained, creational design pattern, creational builder design pattern, best design patterns, design patterns fast, simple design pattern, how to use design patterns, design pattern examples, builder pattern - design patterns, simple builder pattern, pattern

Id: M7Xi1yO_s8E

Length: 10min 48sec (648 seconds)

Published: Sat Jan 19 2019