JavaScript Hoisting

By | October 1, 2021
JavaScript Hoisting

Hoisting is a unique feature of JavaScript, unique because no other interpreted programming language support hoisting.

So what is Hoisting in JavaScript?

Vamware

If I informally defining Hoisting, it is a mechanism of JavaScript that puts all the variable and function declaration at the top of the script or code. Which allows us to access the variable or function before its initialization. I said informally because mostly all the developers define hoisting in this term.

But what actually hoisting does is, it put all the functions and variable declaration at into the memory during the compilation time, and this is the technical working or definition of hoisting.

The key point of hoisting is the declaration and in this tutorial, you will learn why so?

Variable hoisting in JavaScript

In other programming languages, we need to declare a variable before we access it. And the compilers and interpreters use the top-to-bottom approach to compile and execute the code, that’s why we first declare a variable then access it.

But the concept of hoisting in JavaScript allows us to write the code where we access the variable before its declaration. Because when we run the JavaScript code, first the browser compiles the complete code, and in that compilation phase the JavaScript put all the variable declarations at the top of the code.

Now let’s understand the concept of variable hoisting with example

<script >
    document.write("Value of a is: " + a);
    
    //variable declaration
    var a = 20;
</script>

Output

Value of a is: undefined

The JavaScript engine will treat the above code as.

<script >
    var a; 
    document.write("Value of a is: " + a);
    a = 20;
</script>

When it comes to variables only the var declared variables are hoisted to the top of the script and their value is assigned to undefined , as you can see in the above example. If you use it for const and let variables the engine does not initialize a default value so they do not support hoisting.

In the above example, you can see that the hoisting only put the var a; at the top of the script, not its initialization value a=10;

Let’s test the variable hoisting with another example where we only initialize a variable but do not declared it with the var keyword.

<script > 
    document.write("Value of a is: " + a);  // error a is not defined 

    //variable initialization
    a = 20;
</script>

If you run the above code it will throw an error “a is not defined” that you can check by inspecting the code. The above code will be throwing an error because hoisting only put the declaration not initialization.

Function hoisting in JavaScript

Similar to the variable hoisting, in function hoisting the function declaration put at the top of the script during the compilation phase or before the code execution.

The function hoisting allows us to write the function call statement above the function declaration in the code.

Example 

<script >
    func1(); // call function 

    //funciton declaration
    function func1()
    {   
        document.write("func1 is called");
    }
</script>

Output

func1 is called

In the above code, you can see that we are calling the func1() before its declaration, this is because of hoisting.

The function hoisting is only available for function declaration not with function expression. Because in a function expression we initialize the function to a variable, and according to the variable hoisting the initialization can not be hoisted to the top of the script.

Example 

<script >
    func1(); //TypeError: func1 is not a function

    //function expression
    var func1 =function ()
        {   
            document.write("func1 is called");
        }
</script>

Summary

  • Hoisting only put the variable and function declaration at the top of the script.
  • For variable declaration it only declares var declared variables as undefined at the top.
  • Function expression and let & const keyword do not work with hoisting.

Note: Hoisting is a complicated feature of JavaScript so it’s always suggested to follow the top to bottom approach for declaring and accessing variables and functions in JavaScript to avoid the hoisting bug.

People are also reading:

Leave a Reply

Your email address will not be published. Required fields are marked *