JavaScript Hoisting

Understanding Hoisting in JavaScript (with Examples)

by
JavaScript Hoisting

In this article, we will learn hoisting in JavaScript with the help of examples. We will look at both variable and function hoisting.

What is Hoisting?

Hoisting is the process of moving the variables and functions to the top of their scope before the code is executed. It allows us to access the variables and functions anywhere in their scope, no matter where they are declared.

We can hoist variables and functions. Let us understand them with examples.

Variable Hoisting:

Generally, we declare and initialize variables like this:

  <script>
    var num1; // declaration
    num1 = 100; // initialization
    console.log(num1); // prints 100
  </script>

In JS, we can do the initialization before the declaration.

  <script>
    num1 = 100; // initialization
    var num1; // declaration
    console.log(num1); // prints 100
  </script>

We can even move the declaration to the end.

  <script>
    num1 = 100; // initialization
    console.log(num1); // prints 100
    var num1; // declaration
  </script>

This is called hoisting. We can access a variable before it has been declared.

In the case of var variables, you need to remember 3 things.

1. By default, the var variables are initialized with the undefined value.

  <script>
    console.log(num1); // prints undefined
    num1 = 100; // initialization
    var num1; // declaration
  </script>

It prints undefined (initial value) because we are accessing the variable before initialization and declaration.

2. We can declare and initialize a var variable in a single statement. If we try to access it before the statement, it prints undefined.

  <script>
    console.log(num1); // undefined
    var num1 = 100; // declaration and initialization
  </script>

3. If we don’t declare a variable and initialize it with a value, it becomes a global variable. It is not hoisted. We get a ReferenceError.

  <script>
    console.log(num1);
    num1 = 100; // initialization
  </script>

Output:

Uncaught ReferenceError: num1 is not defined

Now, let us look at the let and const variables.

  <script>
    num1 = 100; 
    let num1;
    console.log(num1);
  </script>

Output:

Uncaught ReferenceError: Cannot access 'num1' before initialization

It throws ReferenceError. You will get the same output if you replace let with const. This is because, unlike var, they are not initialized with any default value.

Like I said before, the var variables are initialized with undefined. This is why hoisting worked without any errors. But, the let and const and are not initialized with any value. So, we got the error.

Function Hoisting:

Similar to variables, we can call a function before its declaration.

  <script>
    printMessage();
    function printMessage() {
      console.log("SemicolonSpace");
    }
  </script>

Output:

SemicolonSpace

If there is no hoisting, we have to write like this always:

  <script>
    function printMessage() {
      console.log("SemicolonSpace");
    }
    printMessage();
  </script>

Output:

SemicolonSpace

This is all about JavaScript Hoisting. I hope you got useful information. If you have any doubts, let me know in the comments below.

Related:

Leave a Comment