Post
Ask Question

Hoisting In JavaScript

Introduction

 
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 behavior 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 on 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 on client-side instead of doing it on 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 the same output.
  1. <script>    
  2.     x = 5;    
  3.     alert(x);    
  4.     var x;    
  5. </script>   
And
  1. <script>    
  2.     var x;    
  3.     x = 5;    
  4.     alert(x);    
  5. </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.
  1. <script>    
  2.     var x = 2;    
  3.     var y = 4;    
  4.     alert(x + y);    
  5. </script>   
This will give you an output of 6.
 
And
  1. <script>    
  2.     var x = 2;    
  3.     alert(x + y);    
  4.     var y = 4;    
  5. </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 the same as in the following.
  1. <script>    
  2.     var x = 2;    
  3.     var y;    
  4.     alert(x + y);    
  5.     y = 4;    
  6. </script>   
This will give you an output of NaN.
 
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 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.


Similar Articles