In this article we will learn about Scope, Scope Chain and Lexical Scope, which are few of the core ideas of JavaScript.

Scope.

In JavaScript scope means a particular region of code where you can access some variables.

There are two scopes:

1. Global Scope

2. Local Scope

Global Scope:

The variables declared in global scope can be accessed throughout the code.

var a = 10;
var b = 20;
function sum(){
result = a + b;
}
sum();
console.log(result);   //30

Local scope:

The variables declared inside a function can be accessed only in that particular function and cannot be accessed anywhere outside the function.

function sum(){
var a = 10;
var b = 20;
result = a + b;
}
sum();
console.log(result);   //30

function num(){
var a = 10;
var b = 20;
}
function add(){
result = a + b;
}
add();
console.log(result);  //ReferenceError: a is not defined

Scope Chain

Scope chaining is a method of finding the references.

During the execution of JavaScript code , the search for values of variables starts from the current scope. If the value of that variable is not found in the current scope of function, then the JS engine moves to its parent function. This process is continued in a lexical manner up to the global scope, to find the value of the required variable (if at all it exists).

var a = 10;
function first(){
var b = 20;
second();
function second(){
var c = 30;
console.log(a + b + c);
}
}
first();   //60

So in the above code, there are three variables and two functions. var a is declared in the global scope, var b is declared inside the function first() and var c is declared inside the function second().

So the console.log(a+b+c) is a mathematical expression and it needs the values of a, b and c to provide us with the answer. So the value of variable a has to be found first. What the JS engine does is, first it looks for the variable a in the function where console.log(a+b+c) exists i.e. the function second(). If the value is not found, then it goes to its parent function i.e. the function first(). If the value is not found even here, then it moves to the global scope. Since the variable a is in global scope, the JS engine now knows the value of a and now it searches for the values of b and c in the same lexical manner.

Lexical Scope:

In JavaScript, when there are nested functions, the inner most function has access to the variables in its parent function. This is known as lexical scope. In simple words, the child functions are lexically bound to their parent functions.

The child function can access the variables in its parent function, the parent function can access the variables in the global scope, but a parent function cannot access a variable in its child function. A variable is only accessible within that function and any nested functions.

function greet1() {
  var outer = "Hey";

  function greet2() {
    var inner = "Welcome to my blog";
    console.log(outer);
    console.log(inner);
  }

  greet2();
}

greet1();   //Hey
            //Welcome to my blog

   function first() {
      var second = 10;
      third();
      function third() {
        console.log(second); //prints 10
      }
    }

    first();             //10
    console.log(second); // ReferenceError: second is not defined.

I hope this blog helped you to have the idea of Scope, Scope Chain and Lexical Scope in JavaScript. Thank You.