Hoisting in JavaScript: Simplified

I often see JavaScript developers are struggling to understand HOISTING in JavaScript. In this post let us try to understand the hoisting in simple words.

All JavaScript variables are hoist at the top of the scope (function) in which they are defined. To understand it consider the code snippet shows below,

    var foo = "foo";
    console.log(foo);

Above code will print foo in the console. Simple isn’t it? Now let us go ahead and add a function as shown in below listing,

    var foo = "foo";
    console.log(foo);
    (function () {
        console.log(foo);
    }
    )();

foo will be printed twice on the console. We saw that a variable defined outside a function scope or in global function scope can be used inside other functions. Let us go ahead and modify the function as shown below,

 

    var foo = "foo";
    console.log(foo); // print foo

    (function () {

        console.log(foo); // print undefined
        var foo = "zoo";
    }
    )();

To be surprised now second console statement will print the value undefined. Well, why it is happening? These are the following reasons of that,

  • We have again declared foo inside the anonymous function.
  • As we discussed earlier, JavaScript always hoist a variable declaration at the top of the scope. It only hoist the declaration not the initialization.

In actual, above anonymous function can be seen as below. Declaration has been moved to the top of the function scope, whereas initialization is done at the place variable is declared.

clip_image002

In above function, we are trying to access variable foo before it is initialized and that’s the reason we are getting undefined value printed. There are two types of scoping in the JavaScript,

  • Function scope
  • Global scope

Always a variable is hoisted at either the top of the function scope or global scope. When you use var to declare a variable inside a function, then that variable is inside that particular function scope. When you declare a variable without using var, it is always in the global scope. I hope now you have better understanding of hoisting in JavaScript

You can also read an explanation on LET which is part of ES6 Derick Bailey blog

Published by

Dhananjay Kumar

Dhananjay Kumar is Developer Evangelist for Infragistics. He is a 8 times Microsoft MVP and well respected Developer Advocate in India.He is the author of 900+ Blog Posts, and can often be found speaking around India at conferences and hosting free workshops for programmers across the country. So far, he has hosted 60 free workshops on various topics like JavaScript, Angular, WCF, ASP.NET MVC, C#, Azure etc. Follow him on twitter @debug_mode for all the updates about his blog posts and workshops. You can send him email at debugmode [at] outlook [dot] com

4 thoughts on “Hoisting in JavaScript: Simplified”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s