Null Object Pattern - Design Patterns

hello everybody kyle here from webdev simplified in this video i'm going to be going over the null object pattern which in my opinion is one of the easiest to understand and implement design patterns out there I'm going to be talking about what it is and the different scenarios you should be using it in and then at the end of the video I'm going to be going through an example of me converting some existing code into code that uses the null object pattern so make sure you stick around until the end let's get started now in order to talk about what the null object pattern is we first need to talk about the scenarios that you would want to use this pattern in so we can better understand why this pattern is being used and how it works essentially the null object pattern is going to be used anytime that you have a null object being returned so the keyword null in a programming language such as JavaScript being returned so normally when you do that you have to check if something is equal to null before you actually access the different properties on that no problem object because if you access a method for example on a no object you're going to get a null error being thrown in your code which is something you don't want so you need to have a bunch of if checks in your code to check to see if something's equal to null or not before you proceed to use the rest of the code the idea behind the null object pattern is that you create an object that you return instead of null that has the exact same signature so the same properties and the same methods as the object you would already be returning from that method and it'll just have default values for all these different properties and methods so now instead of having to check for null every single time and then if it's null do something in if it's not and we'll do something else you can just treat the object that's being returned from this method for example this null object as if it was just a normal object of that same type for example if you have an item and an item may or may not have an image so when you get the image of an item it'll either be null or it'll be an image you would have to check every time you use that image before you did anything with it you'd have to check if it's null and if it's null show some default image for example or if it's not null then just show the image itself but if you're using the object pattern this image property will just return a null object of the image which would just be a default image for example that you would be displaying instead of the actual image so every time you got the image of an item you would return this null image which would act exactly the same as a normal image object but it would just have default values such as a default image that it would be displayed instead of the actual image of the item a common place that this is used is with user account because many websites have an option for you to sign into an account and if you're not signed in you're being treated as a guest user so it'll show that you're a guest maybe in the corner of the display of the website and you'll have certain permission levels where you can access some things but not other things because you're only a guest and not signed in so let's take a look at an example of what we have a user system well we will have guest users and actual users that are signed in I just have a simple script open up in Visual Studio code with a user class here at the top and there's user has an ID and a name property that will be accessed as well as a has access method which returns whether or not this user has access to this certain criteria and in our case this is just going to be if the name is equal to Bob I then have a list of our two users here user number one is Bob and user number two is John and then finally a method that is going to be getting a user given an ID and it will just find the user from this list based on the ID that we pass this method in order to return that user and if it can't find that user it is going to return null then down here I'm going to be printing that user based on ID so you call print user give it an ID it'll get that user from the ID and then down here it'll get the name of the user and print Satan hello name but if the user does not have a name for example this user does not exist it'll just print guests and then down here it'll check if the user has access or not and then print whether they have access or not and this is using not the null object pattern and as you can see in the comments here there's quite a few problems with this first of all we need to explicitly tell the console dot log to print this extra name of guest if the users not logged in and every time we either print or display the user's name we need to put this check where we check if it's null and then tell it to print guests which means we have to always make sure we type guests exactly the same in all these different locations and if we ever want to change this guests default name to something else we have to change it everywhere else in our code which is a terrible thing to do because it's so easy to miss a single place where it's used and it's very hard to find that error if you do make that error it's also very easy to forget to check for null for the user and then you start to get weird things where you may return undefined as the name which never looks good or you'll just throw an error where your site will crash same thing down here what the user has access we need to check first if the user is null and if they have that has access property on the user object before we can actually call it otherwise we're going to get an error and this will happen a lot and we will very easily forget to do this null check which again means that our website could air out a completely crash for our user which we do not want so let's click look at how this code actually functions by calling this print user function with the different IDs of the users that we have so if we just call print user and we call it for example with a user ID of 1 which is the first user on a list of Bob you'll see that it prints hello Bob you have access which is exactly what we want if we then want to print with our second user of John you'll see there says hello John you're not allowed here that's because John's name does not equal Bob so then if we print a third user which is going to be a user that does not exist you'll see that prints hello guest you're not allowed here and that's because down here in our code we have all of our different null checks checking to make sure if we have an OLE user to treat it in a special case by printing out guest as the name and to make sure to say that they don't have access instead of calling a function that doesn't exist on that null object so what we want to do is we want to remove all the different null checks that we have throughout our code here by using null object pattern so what we want to do is we want to convert this code to be using a null object that gets returned from this get user function up here instead of just returning null so the first thing to do that we could just create this null object class and this no object class is going to be very similar to our user class so we'll just copy our user class paste it down here and instead of calling it user we're just going to call it Noli user so we note that this is a null object this is a very common thing to do with the null object pattern by prefixing the name of the class with null to say that this is the null version of the object we're trying to represent and our null object is not going to take any ID or name because it's just going to have some default properties we'll give it a default ID of negative one and then the name is guest since that's the name we're trying to print out down here we want guest to be our default name and a guest user will never have any access on our website so we're just going to return false for them having access to anything now with that Technic arif all we need to do is instead of our get user function if we don't find that user we just need to return a null user instead of an actual user so we can just set a user variable here to what we find from our users dot find and if that user is null so if we don't actually find any user inside of that list only need to do is return a null user and then if we do find a user X for example so if the user does exist we then just want to return that user so now this get user function takes care of the null check itself and now we never have to check if the user is no anywhere else inside of our code so if we scroll down here we don't actually need any of these other checks here we can just instead print the name of the user from the user variable we got here from our get user function and same thing down here we don't need to check anything about it being null we can just check if the user has access it'll say you have access or you are not allowed so now if we go into our browser here and we run this print user function so I say print user and we give it an ID of 1 for example which as we know is our user Bob who will have access due to this function if we run this you see it says hello Bob you have access if we try to do print user and we do to which is going to be our John user it'll say hello Jean you're not allowed here and then finally if we try to print with user three and in our array we don't have a user number three so it'll default to that null object of guest and if we run that you'll see us as hello guest you are not allowed here and that's as easy as the null object pattern is it really only requires you to add one extra class or object to your actual code and then instead of returning null you return that null object that you created and it saves you from having to do all those extra null checks throughout all of the rest of your code and instead you only have to do that in all check once when you're actually getting the object itself and then you can either return the null object or you can return the actual object that is being found and I have all of these different code examples on my github page that you can view which is linked in the description and my pinned comment below so make sure you check that out if you're interested in dissecting this code in more depth I have a bunch of comments in there explaining how everything works and if you're still confused after looking at all that please make sure to leave a comment down below asking me any of the questions that you guys have problems with so thank you guys very much for watching this video I hope you learned something about the null object pattern and I hope this whetted your appetite a little bit for wanting to learn more about how you can create cleaner style code that'll save you a bunch of headaches in the future and if so make sure to check out the rest of my design pattern videos coming in the future thank you guys again for watching this video have a good day

Channel: Web Dev Simplified

Views: 35,513

Rating: 4.9786477 out of 5

Keywords: webdevsimplified, design patterns, null object pattern, null object pattern tutorial, null object pattern javascript, null object pattern explained, null object pattern javascript tutorial, design pattern tutorial, design pattern tutorial for beginners, design patterns explained, design pattern tutorial javascript, null object pattern for beginners, null object pattern in 10 minutes, easy null object pattern, null object, null object explained, null object tutorial, null, object

Id: D4Dja5WSZoA

Length: 10min 23sec (623 seconds)

Published: Sat Dec 01 2018