Written by Siddartha Thota on April 29, 2015 in javaScript > Scripting

Learn about the Concept of Scope in Javascript

GET ALERTS:

Get our Latest updates delivered to your mailbox!

Scope is one of the most important topics in JavaScript. The best way to define scope of a variable/function is “it determines the accessibility of the specific variable/function”. It can be divided into limitless amount of levels like Global Scope -> Sub Scope -> Baby Sub Scope and so on. As the name reflects that Global Scope is globally accessible.

Other than Global scope, we need to know about the Local Scope as well, in which the variables/functions are only limited to that specific local function in which they are defined and cannot be accessed from it’s parent.

I hope that gives the required information about the scope. I’m here to explain you with best possible scenarios that will give you even better understanding about the Scope concept in the JavaScript.

march-3x-24x-FFP-6x

 Explaining Concept of Scope in JavaScript:

 var globalVariable = "This is a global variable.";

var globalFunction = function() {
alert(globalVariable);
globalVariable = "I have changed the value here";
};

globalFunction();
alert(globalVariable);  

What’s the output: First alert box pops-up saying “This is a global variable” followed by second alert box saying “I have changed the value here”. This shows that we can access the global variables from anywhere in our code and the scope of the global function/variable will always be globally accessible.

learn about scope local scope in javascript

var globalVariable = "This is a global variable.";

var globalFunction = function() {
var localVariable = "This is a local variable"; //local variable inside the function scope
alert(localVariable);
globalVariable ="I modified the global variable";
};

globalFunction();
alert(localVariable); //local variable outside the function scope
alert(globalVariable);  

What’s the output : The globalFunction() gets invoked and displays the alert(localVariable) in the alert box “This is the local variable” and after that you will notice nothing happens, because the Javascript controller comes out of the function and trying to search for the alert(localVariable) outside the function and fails. Once the first alert fails, the Javascript engine stops executing the code, for which alert(globalVariable) doesn’t gets executed. This is one of the best example explaining local scope of the variables.

local variable scope
A similar example by passing the parameter in the function.

var globalVariable = "This is a global variable.";

var globalFunction = function(parameter) {
var localVariable = "This is a local variable";
alert(parameter);
globalVariable ="I have changed the value here";

};

globalFunction(11);
alert(parameter);
alert(globalVariable);  

What’s the output : considering the parameter value 11 which we passed inside the function it alerts 11 in the first instance, and then breaks as the parameter scope is just limited to the function.

javascript scope

Let's make things bit more complicated here.
var globalVariable = "This is a global variable.";

var globalFunction = function() //parent function {
var localFunction = function() //child function {
var childLocalVariable = "This is the super child local variable.";
alert(childLocalVariable);

};
localFunction();
alert(childLocalVariable); //trying to access child function's variable from parent function.

};

globalFunction();
alert(childLocalVariable);
alert(globalVariable);  

What’s the output : globalFunction() gets invoked, and the controller enters localFunction() and then alerts “This is the super child local variable” and comes out of the child function [localFunction()], and tries to alert the variable in the child function from the parent function [globalFunction()] and breaks the execution at that point.

child scope of local function

var globalVariable = "This is a global variable.";

var globalFunction = function(parameter) {
var localVariable = "This is a local variable";

var localFunction = function() {
var childLocalVariable = "This is the super child local variable.";

alert(childLocalVariable);
alert(localVariable);
alert(parameter);
alert(globalVariable);

};
localFunction();

};

globalFunction(11); 

What’s the Output : globalFunction(11) gets invoked and the controller enters into localFunction() and starts alerting “This is the super child local variable”, followed by “This is a local variable”, followed by “11” and then “This is a global variable”. The reason it’s able to display all alerts is because the scope where we are trying to access the alert is inside the child function. So, this stats us the child function can access all variables/functions of the parent, but the vice versa is not possible.

child scope of local function
local variable scope
javascript scope
learn about scope

For even better understanding, I’m adding few youtube videos that will definitely help you to gain more knowledge about the Concept of Scope in Javascript.

Hope you learnt something about Javascript Scope, stay tuned for more updates.

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: