What is Hoisting in JavaScript?

Hello friends, since few days we were discussing various concepts in JavaScript, and while discussing those I felt that there are lots of my friends are still not clear about one of the concept in JavaScript i.e. "Hoisting",though they are coding in JavaScript since long, therefore I decided to share some thoughts on it and share with them whatever I know about "Hoisting" in JavaScript, so this post is.

Lets first see what the word "Hoisting" means in general. If you type "define:hoisting" in the google, it will show you the dictionary meaning of the word "Hoist", which will also show the synonyms of this word which are "raise, raise up, lift, lift up, haul up, heave up, jack up, hike up, winch up, pull up, upraise, uplift, elevate etc" and example is also self explainatory i.e. "a white flag was hoisted".

So by meaning you are clear that in hoisting something is getting raised or pulled up at top.

Now lets relate this term in JavaScript, if you thought like whenever any JavaScript code or file gets loaded it generally goes from 2 phases, namely the compilation or creation phase and actual execution phase, and hoisting comes into picture in the first phase.

Try running following code in console.

a=10;
alert(a);
var a;

In above example we have assined value 10 to the variable 'a', we also have used it in alert, but if you observe we have declared it at the end, if you write this kind of code in C# you will get compile time error at the start only, but as a dynamic language, JavaScript allows us to write such kind of code and the term "Hoisting" helps in it.

In hoisting, all the variable declartion and function definations gets moved at top, and point to remember here is, when we say moved at top its not gets moved physically in actual. What does happen is the variable and function declarations are put into memory during the compile phase, but stays exactly where you typed it in your coding.

Above code will interpreted like following after hoisting.

var a;
a=10;
alert(10);

Hope the concept is more clear to you now.

Below is the summary points related to "Hoisting",

• All variable declarations and function definations gets hoisted (not gets physically moved at top, rather put into memory)
• "use strict" has no impact on hoisting(check this link answer on stackoverflow)
• In function expression, only declaration part is gets hoisted so the sequence matters, on the other hand, function definitions gets hoisted as a full.

That's it from my side, if you have anything to add, you can share it in comment section below. Thanks. Do share this post with your friends if you liked it.