JavaScript variable scope

Scope is the region of the code where we can access variable. When variable is no longer accessible in part of code we say variable is out of scope.

In JavaScript there are three type of scopes.

  1. Local scope
  2. Global scope
  3. Automatic global scope

Local Scope

All variables declared using var keyword inside a function are local to that function. Function parameters are also local variables of function. They are no longer accessible outside of that function.

Example –

var greet = function(param_name) {
 var local_name = "this is local var of greet"
 // param as local variable
 console.log(param_name);
 // local variable declared inside function
 console.log(local_name);
}

console.log(local_name);  // will produce error in strict mode as 
                         // local_name is out of scope

Global scope

Functions enclosing scope is called global scope of that function. Global variable is accessible to function as long as we don’t declare local variable by same name.

var global_var = 'global variable';

var scope_test = function() {
  console.log(global_var); // available here
}

scope_test();

If we declare local variable with same name then global variable is not accessible.

var global_var = 'global variable';

var scope_test = function() {
  var global_var = 'local variable';
  console.log(global_var); // global_var is now local variable
                           // with value 'local variable'
}

scope_test();

Automatic global variables

If we miss var keyword, the variable is considered as global in JavaScript and is available in all parts of code. This can cause strange issues which are difficult to find. so always use var while declaring the variables in javascript. This will not be issue if you are using strict mode.

Example –

var scope_test = function() {
  accidently_global = 'I am global coz you missed var before me';
}

scope_test();
console.log(accidently_global); 
// this is available here, it's automatically global
// in browser it will be attached to 
// global window object and will be accessible everywhere.

Unlike Java, c or C++, in JavaScript variables follow function scope and NOT block scope.

var scope_test = function() {

 var numbers = [1,2,3,4,5];

 // num is declared in for block
 for(var num in numbers) {
  // do some stuff here
 }
 
 // Unlike Java or C, num is still in scope here
 console.log(num)
}

scope_test();

// num is no longer accessible out side the function
console.log(num) // Error with strict mode

If you want to declare variable with block scope, use let instead of var. So in above example, if we use let num, it will not be accessible outside the for loop.

var scope_test = function() {

 var numbers = [1,2,3,4,5];
 for(let num in numbers) {
  // do some stuff here
 }
 
 // num is not in scope, thanks to 'let'
 console.log(num)
}

scope_test();

Scope behaves differently when we nest functions. Read my post on closures for more information.

Advertisements

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