In this lesson, we'll walk through variable, function declaration, and function expression hoisting.

Hoisting in JavaScript

[00:00] Let's talk about hoisting in JavaScript, specifically variable hoisting, functional variation hoisting, and function expression hoisting.

[00:08] Go ahead and take a look at this code, and look at what line three is going to alert when FN is invoked. What you probably think is going to happen is we define the variable in the global scope called "MyVariable" and set it to equal or at our value.

[00:21] Then, we define another variable in the global scope called "FN," that's a function. When this function gets invoked, we go ahead and alert MyVariable. It's not going to find a MyVariable in this scope, it's going to go to its outer scope, and then, learn outer variable. After that happens, it's going to define a variable in FN scope instead of equal to new local value.

[00:42] But what we actually get is undefined. The reason for that is, before your JavaScript executes, the JavaScript engine will compile your code before it interprets it. Part of this compilation is to find all the declarations. This is a declaration, this is a declaration, and this is also a declaration.

[00:59] It's defined those declarations and associated them with their appropriate scopes. This is the reason why the output you might have expected is different than what actually occurred. What the JavaScript compiler does is it takes your code and compiles it to look something like this.

[01:12] You'll notice here, my variable's the same, but what actually happens is this declaration right here was hoisted up to the top of this function. We define a new variable called MyVariable, we alert MyVariable, and it's currently undefined, and then, we set MyVariable equal to new local value. That's the reason why, when we run this code up here, we get undefined.

[01:34] Now, let's talk about function hoisting. There are two main ways to define a function. The first one is with function declarations, which looks something like this, and the second one is with function expressions. Technically, this is an anonymous function expression, but for this video, I'm just going to refer to it as a function expression.

[01:54] Down here, we have our function declaration, and again, go ahead and reason about what you think this code is going to do when line 10 runs. Line 10 is going to alert the result of invoking our Foo function. What you think would happen is inside of Foo, we define another function called "Bar," and then, we return the result of Bar.

[02:18] If you invoke Bar, that's going to give us one, which should alert one. But we end up getting two. The reason for that, again, is because this is what JavaScript does with your code. You still have the same Foo function, but each function declaration inside your Foo function is hoisted to the top.

[02:37] What happens is the first bar is hoisted, the second bar is hoisted, and then, we return the result of invoking Bar, which gives us two, and then, we alert two. Now, let's talk about function expressions. Remember, this is a function declaration, and this is an anonymous auction expression.

[02:57] Again, here, we have our code. We have a function Foo. Inside of that function, we define another function, Bar, that returns one. We return the result of invoking Bar, and then, we define another function called "Bar," which returns two. Let's see what this one returns. With this one, we get one, and that's closer to what we would expect to happen.

[03:15] Because what happens, if you remember back to variable hoisting, the variables here that are declared are hoisted to the top of the functions. That's really all we are doing with this anonymous function expression, we are taking an anonymous function and assigning it to a variable.

[03:29] Those variable declarations are hoisted. We then get the initialization that is not hoisted, and then, we return the result of invoking Bar, which will give us one.

Hoisting in JavaScript

Share this video with your friends