Dhananjay Kumar

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,

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,

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,

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,

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.