What is Scope Chain in JavaScript

In this article, we will take a look at what is scope chain and how it works on javascript.

What is Scope in Javascript?

In JavaScript, the term "scope" refers to a variable's availability or visibility. In other words, which program components can access the variable, or where the variable can be seen?

Benefits of Scope:

Security is the major benefit of scope.

The variables can only be accessed from a specific part of the application.

in other words. By using the scope, we can prevent unintentional changes to the variables caused by other software components.

The scope decreases namespace collisions as well. In other words, we are able to use the same variable names in different scopes.

What is the Scope chain in Javascript?

The Scope chain is used to resolve the value of variable names in JavaScript

The scope chain in Javascript is Lexically defined, which means that we can see what the scope chain will be by looking at the code.

At the top of the scope chain is the global scope, which is the window object in the browser

What is Lexical Scoping?

A function that is lexically within another function gets access to the scope of the outer function.

In other words, Inner functions can get access to their parent function variables but the vice-versa is not true.

One function can see its scope and global scope, but can't read the scope from another function.

How Scope Chain works?

The JavaScript engine will try to find a variable's value in the current scope whenever a variable is used in JavaScript.

If the variable couldn't be located, it would search in the outer scope and keep doing so until it did or reached the global scope.

let's see example:

  var a = "Hello ";
  function first() {
    var b = "How are you...";
    second();

    function second() {
      var c = "Welcome to party!..";

      console.log(a + b + c);
    }
  }

  function three() {
    var d = "Take your drink...";
    console.log(a + b + c + d);
  }
  first(); // Output : Hello How are you...Welcome to party!..


  three(); // ReferenceError: b is not defined

So, in the above example when the second() the function is executed, it looks for c varaible, which will find in the current scope, next it will look for variable b in the current scope and it can't find there, so it will find on outer scope, where it will get it, and then last it will look for a, which it finds in global scope, so at last we will see our result.

But now when we execute the third function, we get ReferenceError, because b is not in the current scope or global scope, it's actually on another function scope, so one function can't access another variable scope,

So this is how the scope chain works.