Hoisting in javascript

As like the ‘this’ keyword another area which may be confusing in javascript are scope and hoisting . So in the next few minutes we will try to understand the hoisting in javascript.

Hoisting is the process of raising or lifting up of ‘something’ from one ‘position’ to another. In javascript the ‘something’ is variables and functions and the new position is the top of function or global context. Ok let’s look into some examples and understand it in detail.

Can you predict the output of the following?

Note:You can check this in firebug console or any other developer tools in browsers.

As you can see the output is ReferenceError: myVariable is not defined. You know why this happens. Because the variable myVariable is not defined when it is printed to console.

Ok. Now check the following code.

You all know there will not be a ReferenceError: and since myVariable doesn’t have any value assigned to it, myVariable remains undefined.

Ok; now what will be result for the following code?

You would have surprised if you expected ReferenceError: myVariable is not defined. But how come it is undefined?. What happened here is the result of variable hoisting. The variables in javascript are hoisted to the top of the scope. So the variable myVariable is hoisted to the top before executing console.log(myVariable);. Note that only declaration is hoisted and not the actual definition. So the example shown above is equivalent to the following code at the time of execution.

So in javascript it is always advised to declare the variables at the top of the scope (in global context or in function).

hoisting for multiple variables
suppose we have two variable with same value. We would probably declare them as

and we already know the above code can be written as follows.

But you should be careful about the order of assigning. If you write the code as follows

The output will be undefinedjavascript as you saw in the console. This is because the variable myVar2 is assigned to myVar1 when myVar2 is undefined and then only the variable myVar2 is assigned to javascript. In other words the example shown above is equivalent to the following code.

Remember I said the declarations will only be hoisted and not the definitions; and that is why var myVar1, myVar2; is hoisted and the myVar1 = myVar2; are kept as it is for later executions.

function hoisting in javascript
We have seen the declarations of the variables will be hoisted in javascript. Now what happens to functions? Well it depends on how we declare and define a function.
There are two ways for declaring a function
1st way is function foo () {//do something}; and 2nd way is var foo = function () {//do something}; The entire function definition will be hoisted in the first case and only declaration will be hoisted in the second case. Well we can clearly understand this from the following scenario.

The error in executing bar(); is due to the hoisting of variable bar and leaving function definition. But in the case of foo the entire function definition will be hoisted and will execute correctly. Effectively the above code will be equivalent to the following

But remember if we call these functions after their definitions; they will work in the normal way;

But if we define a function with named function expression like var zoo = function boo() {//do something} the code boo(); will not get executed even after function definition. Let us check

Scope in javascript
As the hoisting is related to scope, we can take a look into scope in javascript also. The javascript does not have any block level scope. Which means the scope of a variable/function is entitled to function or global context and does not to a if(){..} or else(){..} block.
Let us check with an example;

The output will be 5,6,6 as the var x=6; inside the if block is hoisted to the top of the function. So that piece of code will not create a brand new x with value 6 instead it just assigns the new value to already existing x.

Leave a Comment

Your email address will not be published. Required fields are marked *