Variable Scoping and Hoisting in JavaScript

Variable Scoping in JavaScript is quite different than other programming languages like C. In this post we will learn variable scoping in JavaScript.

Simply putting, Scope of a JavaScript variable is within region of the program it is defined. So a variable defined inside function will have scope inside that function.

Consider following code snippet,

var globalvar = "Global Variable";

 function funct1() {

var gloabalvar = "Local Variable";
 console.log(gloabalvar);
 return globalvar;
 }
 console.log(globalvar);
 var result = funct1();
 console.log(result);

You will get output as following,

clip_image001

You can see that scope of variable is within the region it is defined. We are getting second output as Local Variable because scope of globalvar is overridden in funct1 function.

Essentially variable globalvar has two different scope in above code. It has been changed inside funct1 function. So when you print its value inside funct1, you get ouput as Local Variable and outside that its value is Global Variable.

Now consider second example in this. In below example we are defining variable without keyword var.


globalvar = "Global Variable";

 function funct1() {

gloabalvar = "Local Variable";
 console.log(gloabalvar);
 return globalvar;
 }

 funct1();
 console.log(gloabalvar);

In above example inside function globalvar is getting modified and it is modifying globally scope variable. When you define a variable without var keyword, its scope is global. Output of above code would be as follows,

clip_image001[6]

Function Scope

In JavaScript works on Function Scope. In Function Scope variables are visible inside function they are defined and inside any nested function of that function.

Consider following example,


function funct1() {
 var i = 10;
 if (i == 10) {

var j = 9;
 for (var m = 0 ; m < 9 ; m++) {
 console.log(m);
 }

&nbsp;

}

console.log(m);
 console.log(j);
 console.log(i);

 }

 funct1();

In above code we are variable j and m inside if and for block respectively. In language like C there scope is limited to block they are defined. However JavaScript works on Function Scope so variable j and m are visible throughout the function. We are printing them outside block in which they are defined and JavaScript is printing them. Output of above code would be as follows,

image

JavaScript Hoisting

Just we learnt that JavaScript variables are scoped throughput the function in which they are defined. In JavaScript variables are visible before they are declared and this is known as Hoisting in JavaScript. JavaScript assumed that all the variables are declared at the top of the function. In other words all the variables are hoisted at the top of the functions.

Consider following example,


var i = 9;
 function funct1() {
 console.log(i);
 var i = 99;
 console.log(i);
 }

 funct1();
 console.log(i);

As output you will find that second print statement will print undefined. Reason behind this even if I is initialize in second line of function, it is visible throughput the function. Since I is hoisted in function so you get undefined for second print. Output of above code snippet is as follows,

clip_image001[8]

In Block Scope programming language it is better to define variables as near as possible to where they are used. Whereas due to hoisting and Function Scope in JavaScript it is better to declare a variable at the top of function.

A good understanding of Function Scope, Hoisting in JavaScript is important to write better codes. I hope you find this post useful. Thanks for reading.

6 thoughts on “Variable Scoping and Hoisting in JavaScript

  1. Thanks,     however some of the code examples are wrong    globalvar gloabalvar this is why the result is showing Global,Local,Global

    it should be Global,Local,Local

    also 9,99,99 is wrong it should be nothing,99,9

    I didn’t check the others

    Thanks! Sameh

    ________________________________

  2. Pingback: Dew Drop – September 5, 2013 (#1,618) | Morning Dew

  3. Pingback: Friday Five - September 6, 2013 - The Microsoft MVP Award Program Blog - Site Home - MSDN Blogs

  4. Pingback: Variable Scope Chain in JavaScript | debug mode......

  5. The last example is wrong because the hoisting of variable i is before de console instruction in line 3, that is i is declared but no defined. The correct output is:
    undefined
    99
    9

    In the example with the globalvar variable I thing you has a typo, gloabalvar for globalvar.

  6. Good post however , I was wondering if you could write a litte more on this subject?
    I’d be very grateful if you could elaborate a little bit more.
    Kudos!

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