So, let's take a look at an example so you can get some experience with how this works. So, here we have a pretty simple example of some code. And it essentially generates all of these boxes right here. So actually, what's happening in here is not really that important. The only sort of different thing that I'm doing here is I'm creating a default value, and this is an ES6 feature. If you actually put a variable right here and then you assign it a value, if you don't specify an amount say on this function then it'll just use the default of four.
Now, I've also got the console open right here. If you want to get that, make sure that you're in a browser and right-click and select inspect element. I'm using Google Chrome right now. And then make sure that you go to this Console tab. This is going to be pretty important so, I'm going to make that a little bit bigger. And then, I'll undo this so we have that howMany variable back in there. So, if we put in a console command right here and we use that howMany variable, then, of course, right now we're going to get the number 12 returned.
However, if we wanted to, we could actually move this variable declaration right here. So, let's go ahead and paste that right there. And let's go ahead and change this to like eight so we can see if we get some sort of difference. And when I do that, you'll see that the log command is going to log a variable called undefined. Now, it still drew the boxes, it made eight of them because my declaration is right here.
Now, if I were to move this variable declaration ... Let's go ahead and take this out and put the var keyword right here. And we're going to move this to the bottom of this sort of call of the function. So, what should happen now is I should only get four of them because although the variable is declared above this console log, when it gets to the statement it's still going to print undefined but now I'm actually calling the function with an undefined variable which is right here, so it kicks back to the default.
And this is what I'm talking about a typical sort of example piece of code that you may run into and you have to sort of figure out what you would get with this console log statement. So, what this also does is give us the ability ... Let's go ahead and move this howMany back up here. And we'll actually take both of these and put them at the top. And notice that because functions are also hoisted, I can actually call the function before it exists.
It's sort of a way of creating an index, or some sort of glossary where you put all your stuff, your functions at the bottom, and that's sort of perfectly fine. Now, if you are doing this, and interesting thing is that a function declaration ... So, we say something like var createBoxes equals function. So, if we make this an actual assignment, then the function createBoxes is not going to be available when we call it up here.
So, this will still work if we do this. But if we try to assume that it's going to hoist this assignment, that is not going to work. So, let's go ahead and move this back up here. And I'll show you something else that you can do. So, let's go ahead and, we'll go ahead and comment these out. And we'll create this createBoxes as an expression.
So, you know if you take a function createBoxes, and you add or you put it in parentheses that creates an expression. So, this is an expression. And so, this is not really going to produce any errors but we are never calling the function so it's not going to draw any boxes for us. However, if we want to we can make this an expression by putting these other parentheses in here and then we can put in whatever number we want here.
This number gets actually passed as the quantities. So, if we save this we should get all of our boxes back again. So, this is another way of writing this same function that might be sort of a little bit easier. And this is what we call also an IIFE which I have done another video in this series about. Now, here's a couple of other interesting things that are happening. Now, notice that we have this variable called myNode right here. And it is in a for loop, but this variable is actually going to exist as the defined variable right here.
So, if we say console log and then we say myNode we're not going to get an error, but it's going to print out undefined as the variable value. Because what's actually happening with this variable declaration is that it gets hoisted outside of the for loop within the scope of this function. So, it actually goes up here with this other variable, and it declares that variable but it has an undefined value. So, we can actually call it from right here.
And in the same way we can actually call this i right here, this incrementer. So, we can actually console log i even though it looks like it's outside scope and it's given us two undefined variable. This is where the let statement in ES6 can make things a little bit clearer. So, if we want to make sure that this variable only exists within this for loop we can use the let statement instead of variable, and let's go ahead and do that for this loop. And now, when we save this we should get an error because these statements are using variables that aren't in the proper scope.
So, let's go ahead and comment those out, and rerun this. And we'll see that we get all of the boxes again. So, this is definitely something that can trip you up when you're taking a test, but as long as you study what is going on with scope as well as hoisting, you should have no problem with these sort of tests. Here's a couple of websites where you can get more information about hoisting, as well as some great courses you can take to make this a little bit clearer.
As usual, if you have any questions that you want to share with me that somebody has asked in you an interview, you can connect with me in LinkedIn or just about any other social media network, like Twitter or GitHub @planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.