JavaScript

What is JavaScript Hoisting

JavaScript provides the feature of using a variable before the declaration. In other words, we can use javascript variables without a declaration.

JavaScript Hoisting

JavaScript hoisting is the behavior of JavaScript, which moves all the declarations of javaScript variables to the top of the scope.

In other words, JavaScript hoisting moves all the variable declarations to the top of the script.

Let’s consider the following examples:

Example 1

<html>
<body>

<p id="test"></p>

<script>
x = 10; // Assign 10 to x

element = document.getElementById("test").innerHTML = x;
// we first find the element by its id and put value of variable x in a tag.
var x; // Declaration of variable x
</script>
</body>
</html>

Output:

Example 2

<html>
<body>
<p id="test"></p>
<script>
var x; // Declaration of variable x
x = 10; // Assign 10 to x

element = document.getElementById("test").innerHTML = x;
// we first find the element by its id and put value of variable x in a tag.

</script>
</body>
</html>

Output:

Explanation:

In example 1 we follow the steps as:

First, assign the value to variable x
We find the tag by its id
We put value of variable x in innerHTML of tag.
At last, we declare the variable x.

In example 2 we follow the steps as:

First, we declare the variable x.
Then we assign the value to variable x
We find the tag by its id
At last we insert value of variable x in innerHTML of tag.

Note: Both examples give us the same result. It is because of JavaScript hoisting feature.

JavaScript only hoists the declaration of the variable. It does-not Hoists the initialization of the variable.
Let’s consider the following examples:

Example 3

<html>
<body>

<p id="test"></p>

<script>
var m = "Errorsea"; // Initialize variable m
var n = "is the best"; // Initialize variable n

element = document.getElementById("demo").innerHTML = m + " " + n;
// we first find the element by its id and put value of variable m and n in a tag.

</script>
</body>
</html>

Output:

Errorsea is the best

Example 4

<html>
<body>

<p id="test"></p>

<script>
var m = "Errorsea"; // Initialize variable m


element = document.getElementById("demo").innerHTML = m + " " + n;
// we first find the element by its id and put value of variable m and n in a tag.
var n = "is the best"; // Initialize variable n
</script>
</body>
</html>

Output:

Errorsea undefined

Explanation:

In example 3, we follow the steps as:

First, we declare and assign the value to variable m
Then we declare and assign the value to variable n
We find the tag by its id
We insert value of variable m and n in innerHTML of tag.

In example 4, we follow the steps as:

First, we declare and assign value to the variable m.
We find the tag by its id
We insert value of variable m and n in innerHTML of tag.
At last, we declare and assign value to variable n.

Note:

Here both examples don’t give the same results.

In example 4, we use variable n without declaring it. So it uses value undefined because we declare and assign the value at the same time.

Note: We can not use hoisting with variables declared using const and let keyword.

Conclusion:

This is all about JavaScript Hoisting. User must be aware of JavaScript hoisting behavior to avoid errors in programming. It is advisable to declare variables at the beginning of the script.