JavaScript Variable Scope

JavaScript variable scope refers to the range of code scope, where you have to access or deal with something.

In JavaScript, scope can be specified where you have to access JavaScript variables (functions or objects).

This way you will be able to manage your code efficiently.

JavaScript has two scopes, local scope and global scope. You should define the scope either globally or locally.

What is local scope?

A variable that you declare within a function called local scope. Variable can be accessed within a function, but outside of function you can't.

Here define a function. Inside this function specifies variables with respective values. This all variables have become a local scope.

function myfun(){
   // variable
   var greetings = "Good morning, have a nice day!";
   document.writeln(greetings + '<br />');

   //function
   function fun1() { 
       document.writeln("Hello world!" + '<br />'); 
   }
   fun1();
    
   // object
   var myObj = { "commercial": ".com", "network": ".net" };   
   document.writeln(myObj.commercial);
}

myfun();

// Remove below comments and run it again
//document.writeln(greetings);          // undefined
//document.writeln(myObj.commercial);   // undefined
//fun1();                               // undefined

Run it... »

What is global scope?

If you declare variables outside of the function, Those variables scopes globally.

You should access variable within function as well as outside of the function. Take a look following example,

// variable
var greetings = "Good morning, have a nice day!";

//function
function fun1() { 
    document.writeln("Hello world!" + '<br />'); 
}

// object
var myObj = { "commercial": ".com", "network": ".net" };   

function myfun(){
   // variable access 
   document.writeln(greetings + '<br />');
   
   // function access 
   fun1();
   
   // object property access 
   document.writeln(myObj.commercial + '<br />');
}

myfun();

document.writeln(greetings + '<br />');
fun1();
document.writeln(myObj.commercial + '<br />');

Run it... »

What is static scope?

Static scope means when you specify a function within another function (call nested function), child function can access parents function scope. If variables declared in parent function can be accessed in child function.

Syntax

function parentFun(){
   var greetings = "Good morning, have a nice day!";
   function childFun() { 
       // greetings is accessible on here
   }
   childFun();
}
parentFun();

Named function example

function myfun(){   
   var greetings = "Good morning, have a nice day!";
   
   //function
   function fun1() { 
       document.writeln(greetings + '<br />');  // greetings is accessible on here
   }
   fun1();
}
myfun();

Run it... »

Anonymous function example

var myFunction = function () {
  var greetings = "Good morning, have a nice day!";

  var fun1 = function () {
    document.writeln(greetings);  // greetings is accessible on here
  };
  fun1();
};
myFunction();

Run it... »

Note Above things can't happen in reversible that means declared variables in child function, you can't access in parent function.

function parentFun(){
  
    function childFun() { 
      var greetings = "Good morning, have a nice day!";
    }
    childFun();

    // greetings here undefined
}
parentFun();

Auto global scope

When you declare variables at the time if you are not specify var keyword automatically variable can consider global scope.

function myfun(){
   greetings = "Good morning, have a nice day!";
   document.writeln(greetings + '<br />');
}

myfun();
document.writeln(greetings);        // greetings is accessible on here

Run it... »