From the course: Mastering Web Developer Interview Code

How do you use a constructor to create instances?

From the course: Mastering Web Developer Interview Code

How do you use a constructor to create instances?

- [Instructor] There's a lot of patterns that developers use in JavaScript, and one of the most common is the constructor pattern. It lets you use the power of JavaScript objects to create powerful instances. And it's fundamental to many other patterns. Now, one of the things that makes JavaScript really special is that just about everything is an object, which is a data type that is extremely flexible because it can hold other types of data, including other objects. An object uses the power of closures to build reusable elements that remember the environment that they were created in. If you need a review of closures, make sure that you take a look at episode two. Now creating a constructor is pretty easy, and they look just like functions that have other functions in them. But because they're a part of an instance of an object, these can perform actions that are called methods. The constructors are pretty cool, but it's definitely something that you'll need to experience to understand. So let's take a look at a common example. And what we're going to do is build a hamburger menu. We've got sort of the core of the menu here, but it's not really working. If we try to click on this one, it doesn't really do anything. It is responsive. And you can see that I'm using flex box to lay this thing out. So make sure you check out the episode on flex box, if you want to take a look at how I did this. There's another menu at the bottom because I want to show you sort of how you can create instances for each one of these different menus. So if we take a look at the index dot html file, this pretty much looks like what we did in the episode on flex box, except that we've added this extra button right here. And I'm importing some font-awesome icons just to get this little hamburger menu up here. And I've given this menu an ID of topMenu right here. And there's another one down here that has an ID of bottomMenu. I've also given the sort of group of all of the menu items a class of navitems, just so that I can target that with CSS. The CSS looks pretty good. I've added the CSS for the button right here as well as the hamburger button itself. I do have some special classes that I'm going to use for hiding the button whenever we are not in this small mode. So if I make this wider, you're going to see that that button disappears. It's normally hidden. And when I get to sort of a size that is smaller, it's going to show this button. So whenever we go past 600 pixels, it's going to not show that button regardless of whether or not we click on it. Actually, we wouldn't be able to click on it if it was wider. So we've set all this up, and all we have to do is create a script. And we're going to use this constructor pattern. And what I'll do is create a function here. And I'm going to call this hamburger. I'm capitalizing this because by convention, whenever you use an object or a constructor method, you're going to capitalize this. You don't really have to, but it's what everybody does. And then to this function, we're going to pass a node name of which element on the page we want to activate with this function. So here we're going to create a variable that is going to point to a node. I'll call it myNode, and I'll use document querySelector. And I want to target the node name, and also look for an item with a class of hamburger here. So if we take a look at the index dot html file, you'll note that these buttons have a class of hamburger so that we can target them. And that's what we're doing here. We're sort of targeting the node with this button in it. So here's where we start building our constructor. We're going to return something every time this function is called. And what we're going to return is going to be an object. And this object is going to have a series of sub functions which we're going to put in a JavaScript object. So we're going to do two functions here. One of them I'm going to call activate, and this is going to initialize our hamburger menus and make them collapsible. So this is going to be an anonymous function which means a function. And when you create a function that returns an object like this, and this element right here is another function, we call this a method, because we're going to be able to call hamburger and then use one of these sub functions. Notice that this is also a closure because this activate method or function is going to be able to use this variable. So it let's go ahead and do my function here. It's going to target myNode because it's available to me from this variable. And then we'll say, addEventListener. And then we're going to add a click event, and do another function here. And that function, whenever we do an event, it's going to return an event object, which we'll put in this e variable. And we need to make this fall straight here. And let's go up here. And what we want to do is go ahead and make the navbar. So if we look at the HTML again, we have the button itself, and then we have the navbar right here at the same level. So we want to sort of get to... Since the navbar and the button are at the same level, what I'm going to do is target the parent of the button, because that's what I have on myNode. And that's going to let you get to this navitems. And then from here, I can go down and target this navbar element which has all of these menu items. So the way we do that, we'll say myNode, and then go to the parentNode, and then querySelector. And we want to target the item with a class of navbar. And we'll use the classList method to go ahead and toggle a class that we're going to be calling hidden. So if you remember, from the CSS, we have a class called hidden. When we're at a small size, that class will hide the element by using the display none parameter right here. Let's go ahead and add some comments here. So this is activate. This is going to be the return statement, and then this is going to be Hamburger. All right, so now that we have that, what we could do is create a variable and I'm going to target or call this variable topMenu, because it's going to target the menu at the top. And I'm going to say that this new variable is going to be a new copy of Hamburger. So Hamburger is the method that we created, and it expects us to give it an element to target. So we're going to target the topMenu here. And that's going to get us this hamburger menu right here. And then what we can do is once we have that object, we can say topMenu, and call or activate method for that topMenu. So let's go ahead and save, right? So it looks like this is not quite working yet. And I can see that I made a small mistake here. This node name should actually be capitalized over here. You do have to be consistent. I try to use camel case, which is a sort of with different words, the first other word becomes capitalized. And sometimes that's easy to mess up. Also this hamburger class right here that I'm looking for is a child of topMenu. So I technically should have a space right there. And let's go ahead and save this, and check this out. And it looks like it works. So because we're only targeting this hamburger menu that's the topMenu right here, you'll notice that the one at the bottom doesn't work at all. So if we wanted to activate that one too, we could do the same thing. Just call the bottomMenu, so bottomMenu, and when this reloads, this one will become collapsible as well. So that's pretty cool because we can create sort of a constructor that allows us to target different elements, and each element has its own environment. So in addition to using this activate method to do something like initializing our menu, we could create another method that does something else. So let's go ahead and add another one here. So right after this activate method, because this is an object, we have to add a comma, and I'm just going to copy all this, and make sure that I don't use that comma on the second one. The last element in an object should not have that comma. This is going to be hide, and I'm going to rename this method hide now. It's going to be a function. And in this case, I don't need to add an event listener to this. So I can delete the EventListener part. And it's going to be pretty much the same thing. Look for the parent element, and then use the class list. And what I want to do here is add the hidden class if it doesn't exist. So now I have two methods, and one of them will allow us to hide an element. And the other one will allow us to toggle the elements. So let's go ahead and make sure that the bottom one, let's refresh this, so by default, this one's going to show, and this one's already showing. But maybe we want this one at the bottom to be collapsed. Well, now I have two different methods. So I can say bottomMenu here, and use my hide method so that the bottom part of this is going to be hidden by default. So notice that the bottom one isn't showing. If I scroll up, you can see the top one is. And if I click on this, you will see that it will appear and disappear. So these are configurable. The nice thing about these different constructors is that because of closures, every one of these instances its own environment. So we can control them differently because of how closures give you access to local variables of the different objects.

Contents