In this movie, we're going to talk about another concept that's somewhat unique to JavaScript. And that's hoisting. The best way to introduce this is to show an example. So I'm going to jump over to sublime been using the console a lot in the last several movies. So just to introduce you, again, I have an HTML page. It's linked to a CSS file that has a minimal CSS in it very little, as you can see.

And it's also linked to a JavaScript file down here at the bottom app j. s. And app dot j. s is where I have some JavaScript code that we want to take a look at. Now, let me explain this, this JavaScript code. We have a function in here which we haven't introduced yet, but I want to use this function here because it helps illustrate the concept of hoisting which is a concept I think, is about important to understand. So down here is the function. I've simply defined it a function is simply a group of code that I can execute it anytime I want, when that code executes is when I call the function and I call the function up here. So calling it use the name of the function and then use parentheses parentheses, say to execute that function.

And so it will then come execute this code. All right, at the start of this code, I declare a variable name, set it equal to Steven, then I call the function. The function simply does a console dot log. It takes one variable concatenates to another, and to another and prints it out. It's the exact same thing as what's being done up here. Okay.

Now the thing that's a little bit different about this is these variables that are used in a console dot log statement. are not declared until after the function is called until after the console dot log message is sent. So here's the declaration for greeting. And here's the declaration for punctuation. Now in a lot of programming languages, this would cause an error, because we have not declared the variable before we use it. Not so in JavaScript.

So let's take a look at what's happening. So I'm going to come to my HTML page and just copy the path there. I'm going to jump back. I'm going to reduce this a bit so you can see what's going on. jump back to the browser, and I'm going to paste in that path. And then go ahead and display that sample HTML page.

Now let me open the console. Now I'm going to change the console. So let's attach to the bottom so we can see it as I refresh it, we can see what changes now, so no error was displayed. However, we do have undefined undefined for the variable. That were declared later. Okay.

So this first this is the this first statement here is the console dot log that was called in the function. And this second is the console dot log that was not inside the function. Okay, so let me pull up, go back to the code again. So we can see that. So since we call the function first that executed first, but the variable had not been defined yet, even though it's above it in the code, we're executing it before it gets to this line. Okay, so the variable is not defined.

However, there no no error is presented. And that's where the hoisting concept comes into play. Both of these executed without an error. Here's what JavaScript does when it goes through the code. Initially, every variable it encounters, it sets up, sets aside some memory space for It does not put a value in that memory space until it gets to the line of code when it's executing. But initially, it will set up memory space for it before even any code is executed at all.

And so it goes through this this bunch of code and it identifies this variable, this variable, this variable sets up space for it in memory. So it already knows those variables exist, because it does that. When we hit this console dot log statement, or this one, it doesn't throw an error, because it knows those variables have been declared. They just do not have a value yet. They don't receive a value until after we've executed this executed this. Now, greeting gets a value.

Now punctuation gets a value. That's the concept of hoisting. The reason that is important to know is, once again, it can cause problems if you rely on hosting, hoisting. And so if you see a situation where you're wondering why is This variable undefined, that may give you a clue. Now in just a moment, I'm going to show you a practice you should follow to prevent problems from hoisting. But first, let me show you one more thing that is kind of interesting.

Okay, I'm going to declare greeting here, not with var, I'm just assigning it a value. So technically, I'm not declaring it, I'm assigning it a value, and then also punctuation as well. Now, what do you think's going to print out with this console dot log statement. And this one, remember, this one will execute first, because the function is called here. And then this one will execute. What do you think we're going to see?

Let me save it. jump back to the HTML page, and we'll refresh. Notice that Both console dot log statements come out with Hi, Steven. So let's jump back to the code. So what happened is JavaScript first identifies all the variables and sets up a memory space, then it starts executing sets name equal to Steven, it calls test jumps down to test sets, greeting equal to high, says punctuation equal to question mark, then it does this console dot log, then it acts acts as out of the function comes back here does this console dot log, then we have the two statements where they're actually declared, but JavaScript already saw those instead of side a memory, memory space for them. So when it gets to this point, it would then change to Hello there, an exclamation point just to show that let me copy this and put it after this.

Save it. Let's execute it one more time. And now we see three console dot log statements and the third one is as we expect Good. All right. So, the way to eliminate this from happening or having issues with hoisting is you should declare all your variables at the top of your code, or at the top of a function for those that are being used within a function. Okay?

So in this example, we should declare all our variables up here. And let me show you a little technique that for declaring variables, multiple variables at once. Notice how I'm putting a comma after each variable until I get to the last variable that's declared. Now let's get rid of these statements. Because we cannot that will cause an error if we declare A variable twice using the var keyword. I'm going to get rid of these two down here.

Okay. So this is the correct way to declare those variables, we can then change them later on. But declaring with the var keyword should be done up here. Now this could have been could have been done on three separate lines with three bars and a semi colon at the end of each one. But when you're declaring a lot of variables together, this is a shortcut way for doing it, put a comma, and then I usually indented so I know that this is all part of the same line, and then another comma, and then when we're done declaring all the variables we put a semi colon. So that's something you can keep in mind, a pattern which which is helpful.

The pattern which is important is declaring the variables at the top of your code. Let's go ahead and save this. execute it one more time. Now since we declared the variables that the Top. They both say hello there, Stephen. That's hoisting an important concept to remember.

And an important pattern is to declare variables at the top to avoid problems which come from hoisting