JavaScript Hoisting Explained
Today’s video quick tip comes in response to a question on Twitter, concerning JavaScript “hoisting.” What is it? How does it work? What do you need to know about it? All of that will be covered in this beginner-focused fundamentals lesson.
Full Screencast

Hoisting Explained
Consider the following code:
1 |
|
2 |
var myvar = 'my value'; |
3 |
alert(myvar); // my value |
Okay, of course the alert will display “my value.” That’s obvious; however, stick with me. Let’s next create an immediate function, which alerts the same value.
1 |
|
2 |
var myvar = 'my value'; |
3 |
|
4 |
(function() { |
5 |
alert(myvar); // my value |
6 |
})();
|
All right, all right. Still obvious, I know. Now, let’s throw a wrench into the mix, and create a local variable within this anonymous function of the same name.
1 |
|
2 |
var myvar = 'my value'; |
3 |
|
4 |
(function() { |
5 |
alert(myvar); // undefined |
6 |
var myvar = 'local value'; |
7 |
})();
|
Huh? Why is the alert now displaying undefined
? Even though we’ve declared a new variable, it’s still below the alert; so it shouldn’t have an effect, right? Wrong.
Variable Declarations are Hoisted
Within its current scope, regardless of where a variable is declared, it will be, behind the scenes, hoisted to the top. However, only the declaration
will be hoisted. If the variable is also initialized
, the current value, at the top of the scope, will initially be set to undefined
.
Okay, let’s decipher the difference between the terms, declaration
and initialization
. Assume the following line: var joe = 'plumber';
Declaration
1 |
|
2 |
var joe; // the declaration |
Initialization
1 |
|
2 |
joe = 'plumber'; // the initialization |
Now that we understand the terminology, we can more easily comprehend what’s happening under the hood. Consider the following bogus function.
1 |
|
2 |
(function() { |
3 |
var a = 'a'; |
4 |
// lines of code
|
5 |
var b = 'b'; |
6 |
// more lines of code
|
7 |
var c= 'c'; // antipattern |
8 |
// final lines of scripting
|
9 |
})();
|
Declare all variables at the top.
Note that what’s exemplified above is considered to be bad practice. Nonetheless, behind the scenes, all of those variable declarations — regardless of where they occur in the function scope — will be hoisted to the top, like so:
1 |
|
2 |
(function() { |
3 |
var a, b, c; // variables declared |
4 |
a = 'a'; |
5 |
// lines of code
|
6 |
b = 'b'; // initialized |
7 |
// more lines of code
|
8 |
c= 'c'; // initialized |
9 |
// final lines of scripting
|
10 |
})();
|
Aha Moment
If we now return to the original confusing undefined
piece of code, from above:
1 |
|
2 |
var myvar = 'my value'; |
3 |
|
4 |
(function() { |
5 |
alert(myvar); // undefined |
6 |
var myvar = 'local value'; |
7 |
})();
|
It should now make perfect sense why myvar
is alerting undefined.
As we learned, as soon as the local variable, myvar
, was declared, it was automatically hoisted to the top of the function scope…above the alert. As a result, the variable had already been declared at the time of the alert; however, because initializations aren’t hoisted as well, the value of the variable is: undefined
.