Hoisting In JavaScript

In this post we will discuss the importance and limitations of Hoisting in JavaScript. We all write client side codes, right? But few of you might not be aware of the term Hoisting. Hoisting is one of the default behaviour of JavaScript, it is the process of moving all the declarations of the variables to the top of the current function or scope. In this post we will explain this Hoisting in detail with some examples. I hope you will like this.

Please see this article in my blog here.

Background

I used to spend more time with the client side codes rather than server side codes. In my thought it is always good if you do the formation of your data in client side instead doing it in the server side. Client side loops are always faster than the server side ones. As a client side code developer, you must understand the word Hoisting in JavaScript. Here we will discuss that.

Using the code

Before going through we need to know some facts in JavaScript.

Do you know?

In JavaScript, we can use any variable before it is declared or a variable can be declared after it is used.
For Example:

The following two scripts will return same output.

<script>
    x = 5;
    alert(x);
    var x;
</script>

And

<script>
    var x;
    x = 5;
    alert(x);
</script>

Limitations of Hoisting

Even though the process of Hoisting will move the declarations to the top, there are some limitations too. We will discuss it here now.

Initializing a variable cannot be Hoisted or in simple JavaScript Hoists declarations not initializations.

For Example:

The following scripts will give different outputs.

<script>
    var x = 2;
    var y = 4;
    alert(x + y);
</script>

This will give you an output of 6.

And,

<script>
    var x = 2;
    alert(x + y);
    var y = 4;
</script>

This will give you an output of NaN. Since we are initializing the value of y, the JavaScript Hoisting is not happening, so the y value will be undefined. The JavaScript will consider that y is not yet declared.

So, the second example is same as of in the following.

<script>
    var x = 2;
    var y;
    alert(x + y);
    y = 4;
</script>

This will give you an output of NaN.



Hoisting in JavaScript

Conclusion

Since we are all developers, it always makes things simple. So much complexity in software comes from trying to make one thing do two things. So always declare your variables on top of your function or scope. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, ASP.NET Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.