Advertisement
  1. Code
  2. JavaScript

JavaScript Hoisting Explained

Scroll to top
Read Time: 3 min

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.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.