Understanding Scopes and Scope Chain in Javascript
Scope is the way of accessing variables, functions, and objects in some particular part of your code during runtime.
With scope, we provide some level of security to our code. We have access to the stuff we need at a time.
There are two kinds of scope — Global scope and Local scope.
Global Scope
Variables defined outside a function are in the global scope. Also, There is only one Global scope throughout a JavaScript document.Once you’ve declared a global variable, you can use that variable anywhere in your code, even in function
Local Scope
Variables defined inside a function are in local scope.And they have a different scope for every call of that function. Also, Each function when invoked creates a new scope. So there is a Function scope also.
Scopes in JS, Better with example-
//Gloabl Variable
var num1 = 10;var add = function(){
// Local Variable
var num2 = 20;
console.log(num1); \\ prints 10
console.log(num2); \\ prints 20// Global Variable Accessible inside function
return num1 + num2
}
console.log(num1); \\ prints 10
console.log(num2); \\ undefined error
console.log(add());\\ Print 30
Function Scope
New functions = new scope
// Scope A
var Function1 = function () {
// Scope B
var Function2 = function () {
// Scope C
};
};
All scopes in JavaScript are created with Function Scope only, they aren’t created by for, while loops or expression statements like if and switch. Variables defined inside of a block statement will remain in the scope they were already in.
if (true) {
// this 'if' conditional block doesn't create a new scope
var num2 = 20; // name is still in the global scope
}
console.log(num2); // prints 20
In ES 2016, we have got two new keywords to work with i.e. let, const. And these new keywords support the declaration of local scope inside block statements.
if (true) { var num1 = 10;
let num2 = 20;
const num3 = 30
}console.log(num1); // prints 10, num1 created in global scope
console.log(num2); // refernce error: num2 is not defined
console.log(num3); // refernce Error: num3 is not defined
const and let keyword gets defined in local scope and var is defined in global scope.
In case they are defined in functions, they all behaves the same way. var, let and const they all gets defined in function scope.
Another Example
function print() { var num1 = 10;
let num2 = 20;
const num3 = 30;
console.log(num1); // function scope
console.log(num2); // function scope
console.log(num3); // function scope
}console.log(print());
console.log(num1) // Reference error: num1 is not defined
console.log(num2); // Reference error: num2 is not defined
console.log(num3); // Reference Error: num3 is not defined
Another Example
function add (){ function print() { var num1 = 10;
let num2 = 20;
const num3 = 30;
console.log("Nested Function Scope");
console.log(num1); // prints 10
console.log(num2); // prints 20
console.log(num3); // prints 30
};
print();
console.log("parent function Scope");
console.log(num1) // Reference error: num1 is not defined
console.log(num2); // Reference error: num2 is not defined
console.log(num3); // Reference error: num3 is not defined}console.log("Global Scope");
console.log(add());
console.log(num1) // Reference error: num1 is not defined
console.log(num2); // Reference error: num2 is not defined
console.log(num3); // Reference Error: num3 is not defined
Lexical Scope
In a nested group of functions, accessing the variables which are declared outside the function call is lexical scoping also referred to as Static Scope.
In simple words, JavaScript looks for variables in a way, If it can’t find a variable in its local Execution Context, it will look for it in its calling context. And if not found in its calling context. Repeatedly, until it is looking in the global execution context. And if it does not find then, it’s undefined.
var num = 3var increment = function() {
return num+1;
}console.log(increment());
console.dir(increment);
Another Example
var Function = function () {
var name = 'Aastha';
var OtherFunction = function () {
console.log('My name is ' + name); // Accessing variable name of parent scope.
};
console.log(name);
OtherFunction(); // call function
};Function();
Scope Chain
Scope chains establish the scope for a given function. Each function defined has its own nested scope, and any function defined within another function has a local scope which is linked to the outer function — this link is called the chain.
function parent() { var name = 'Aastha';
console.log(name);
// Reference error: age is not defined
console.log(age);
// Reference error: places is not defined
console.log(places);
function child() {
// function linked to parent() thats why name is accessible.
var age = 23;
console.log(name);
console.log(age);
// Reference error: places is not defined
console.log(places); function grandchild() {
// this function is linked to child() & parent() thats why name, age are accessible. var places = 'Coding';
console.log(name);
console.log(age);
console.log(places);
}
grandchild();
}
child();
}parent();
Please note, Any variable not declared without first being declared with the var keyword, it is automatically added to the global context which eventually becomes Global variable.
var Function = function () {
name = 'Aastha';
console.log(name); //Aastha};
console.log(name); //AasthaFunction();
console.log(name); //Aastha
That’s all in scopes. Hope you like it.