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:
var myvar = 'my value'; 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.
var myvar = 'my value'; (function() { alert(myvar); // my value })();
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.
var myvar = 'my value'; (function() { alert(myvar); // undefined var myvar = 'local value'; })();
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
var joe; // the declaration
Initialization
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.
(function() { var a = 'a'; // lines of code var b = 'b'; // more lines of code var c= 'c'; // antipattern // final lines of scripting })();
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:
(function() { var a, b, c; // variables declared a = 'a'; // lines of code b = 'b'; // initialized // more lines of code c= 'c'; // initialized // final lines of scripting })();
Aha Moment
If we now return to the original confusing undefined
piece of code, from above:
var myvar = 'my value'; (function() { alert(myvar); // undefined var myvar = 'local value'; })();
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
.