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

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s