JavaScript Variables Hoisting in Details

variable hoisting in JavaScript

Variable hoisting is a default behaviour in JavaScript where all variable declarations are moved to the top of the current scope (function scope or global scope) that the variable is defined within.

The typical JavaScript variable can be created in 2-stages : declaration and initialisation.

• The declaration stage is where only variable reference is created, without any value. At this stage, if we try to access the variable value, we will get output undefined.

• The initialisation stage is where the actual value is assigned to the variable.

Let’s see an example :

 ➤ Example :

    In this example, we can see the variable declaration stage, initialisation stage or both variable declaration & initialisation.

<script>
   var name; //Declaration
   name = 'Ankaj!’; //Initialisation
   var message = ‘Hello!’; //Declaration & Initialisation in one step
</script>

---

1.) Variable hoisting globally :

Let’s see an example of globally variable hoisting :

• In this example, we can see in a normal scenario, when x is used before the declaration. In this case, it will give output 10 as excepted.

 ➤ Example 1 : Variable declaration before hoisting ;

<script>
   x=10; //Assign 10 to x;
   document.write(x); 
   var x; //Declare x
</script>

Let's take a look at how JavaScript interprets Example 1, how does it look after the hoisting process is finished. Javascript compiler change Example 1 to Example 2.

 ➤ Example 2 : Variable declaration after hoisting;

<script>
   var x; //Declare x, (Hoisted)
   x = 10; //Assign 10 to x
   document.write(x);
</script>

Example 2, Explanation :

In Example 2, we can see JavaScript hoisting behavior var x; is declared before the initialisation(x=10;). In this case, variable declarations are moved to the top.

Let’s see another example of variable hoisting :

 ➤ Example 3 :

<script>
   // ReferenceError: x is not defined
   console.log(x); 
</script>

• At first in Example a, you may think that the sample code would throw a ReferenceError: on line 2 (console.log(name); because 'name' has not been declared yet.

 ➤ Example a : Variable declaration before hoisting;

<script>
   console.log(name); //undefined
    var name='Ankaj';
   console.log(name); //Ankaj
</script>

Let's take a look at how JavaScript interprets Example a, how does it look after the hoisting process is finished. Javascript compiler change Example a to Example b.

 ➤ Example b : Variable declaration after hoisting;

<script>
   var name; //Hoisted the declaration but not assignment
   console.log(name); //undefined
   name='Ankaj';
   console.log(name); //Ankaj
</script>

Example b, Explanation :

When the variable is hoisted, the declaration is moved to the top, but the initial value assignment remains in place, var name; is hoisted to the top of the scope, however the initial value assignment name = 'Ankaj'; is not affected.

2.) Variable hoisting locally :

 ➤ Example : Variable declaration before hoisting;

<script>
   var message="Document scope";
   function myMessage()
     {
       console.log(message); //undefined
       var message = 'Function scope';
       console.log(message); 
     }
     myMessage();
</script>

 ➤ Example : Variable declaration after hoisting;

<script>
   var message="Document scope";
   function myMessage()
     {
       var message; //This has been done by the javascript itself behind the scenes.
       console.log(message); //undefined
       message = 'Function scope';
       console.log(message); 
     }
     myMessage();
</script>

3.) Variable hoisting with block :

 ➤ Example : Variable declaration before hoisting;

<script>
    function display()
     {
       if(false)
        {
          var message = 'hello';
        }
        console.log(message); //undefined
     }
     display();
</script>

The variable message defined inside if block is visible to the outside block but within the function display() scope. This is because the JavaScript engine read the above code as following :

 ➤ Example : Variable declaration after hoisting;

<script>
    function display()
     {
       var message; //Hoisted the declaration but not assignment
       if(false)
        {
          message = 'hello';
        }
        console.log(message); //undefined but no reference error
     }
</script>

Javascript variables hoisting with var, let and const ?

Note : Variables and constants declared with let or const keyword are not hoisted.

Hoisting with var :

• Variables declared with var are hoisted to the top of the enclosing function scope. If the variable is accessed before variable declaration, it evaluates to undefined.

 ➤ Example i : Variable hoisting with var;

<script>
    console.log(name); //undefined
    var name = "Ankaj";
</script>

In this example, name is accessed before declaration with var. In this situation the declaration is moved to the top.

Hoisting with let :

• Variables declared with let are not hoisted.

 ➤ Example ii : Variable hoisting with let;

<script>
    console.log(name); //ReferenceError
    let name = "Ankaj";
</script>

Hoisting with const :

• Variables declared with const are not hoisted.

 ➤ Example iii : Variable hoisting with const;

<script>
    console.log(name); //ReferenceError
    const name = "Ankaj";
</script>

JavaScript initialization are not Hoisted ?

• The moving of var statements only applies to the declaration of a variable. If there's an initialization combined with the declaration, the initialization stays where it is, and declarations are moved to the top of the current scope.

JavaScript only hoists declarations not initializations, Let’s see an example :

 ➤ Example :

<script>
    console.log(name); //undefined
    var name = "Ankaj";
</script>