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 = 3
var 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); //Aastha
Function();
console.log(name); //Aastha

That’s all in scopes. Hope you like it.