JavaScript hoisting

web
mobile

Hoisting is JavaScript's default behavior of moving declarations to the top.


JavaScript Declarations are Hoisted

In JavaScript, a variable can be declared after it has been used.

In other words; a variable can be used before it has been declared.

Example 1 gives the same result as Example 2:


                    x = 5;           // Assign 5 to x
      
                    console.log(x);  // Result 5
              
                    var x;           // Declare x
                

                      var x;           // Declare x
                      x = 5;           // Assign 5 to x
                
                      console.log(x);  // Result 5
                

To understand this, you have to understand the term "hoisting".

Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).


The let and const Keywords

Variables and constants declared with let or const are not hoisted!

You will learn about let and const in the next lessons.


JavaScript Initializations are Not Hoisted

JavaScript only hoists declarations, not initializations.

Example 1 does not give the same result as Example 2:

Example 1


                      var x = 5;                // Initialize x
                      var y = 7;                // Initialize y
                
                      console.log(x + " " + y)  // Display x and y - Result 5 7
                  

Example 2


                      var x = 5;               // Initialize x
      
                      console.log(x + " " + y) // Display x and y - Result 5 undefined
                
                      var y = 7;               // Initialize y
                

Does it make sense that y is undefined in the last example?

This is because only the declaration (var y), not the initialization (=7) is hoisted to the top.

Because of hoisting, y has been declared before it is used, but because initializations are not hoisted, the value of y is undefined.

Example 2 is the same as writing:


                      var x = 5; // Initialize x
                      var y;     // Declare y
                
                      console.log(x + " " + y) // Display x and y - Result 5 undefined
                
                      y = 7;    // Initialize - assign 7 to y
                

Declare Your Variables At the Top !

Hoisting is (to many developers) an unknown or overlooked behavior of JavaScript.

If a developer doesn't understand hoisting, programs may contain bugs (errors).

To avoid bugs, always declare all variables at the beginning of every scope.

Since this is how JavaScript interprets the code, it is always a good rule.

Note: JavaScript in strict mode does not allow variables to be used if they are not declared. You will learn about Strict mode in the next lesson.


Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.