Scope, Scope chain ,Lexical and Closures

Scope:

Scope refers to the context or environment in which a variable is declared and can be accessed. A variable’s scope defines where it can be used and where it is accessible.

There are two type of scope :

1. Local scope and 2. Global scope

For example:

var b = 10;

function a() {
  var c =10
  console.log(b);
  console.log(c)
}

a(); // Output: 10

Here, b is accessible inside the function a() because b is in the global scope, and JavaScript can "see" it when a() is called.

In your example, the scope of variable b is global because it is declared outside of any function, making it available everywhere in the code, even inside functions like a().

c is local beacuse it is declared inside function.we cann’t access out side then c is known as local scope variable.

Lexical Environment:

Lexical means hierarchy or sequence.

Whenever an execution context is created, a lexical environment is also created.

A lexical environment consists of local memory along with the lexical environment of its parent.

Lexical environment = local memory + reference to the lexical environment of the parent.

In the case of the Global Execution Context (GEC), the lexical environment is null.

Whenever an execution context is created, we also get a reference to the lexical environment of its parent.

Example:

function x() {
  var b = 10;
  y(); // calling function y
}

function y() {
  console.log(b); // looking for b
}

x(); // Output: 10

In terms of code, we can say that function y is lexically sitting inside function x, and x is lexically inside the global scope.

In this case, y is defined inside x, so when y tries to access b, it first looks for b inside its own local environment. Since it doesn't find it there, it checks x's lexical environment, where b is defined, and gets the value 10.

Scope Chain:

The scope chain refers to the sequence of environments the JavaScript engine will search when looking for a variable.

The engine looks in the current function's scope first, then checks the parent scopes, all the way up to the global scope.

Example:

var b = 10;

function x() {
  y(); // calling function y
  function y() {
    console.log(b); // looking for b
  }
}

x(); // Output: 10

Here, when y tries to access b, it first looks inside its own scope. If it's not there, it looks in x's scope, then in the global scope where b is defined, and finally prints 10.

Why does b give an error in certain cases?

Let's consider this case:

javascriptCopyfunction x() {
  y(); // calling function y
  function y() {
    console.log(b); // trying to access b
  }
}

x(); // Error: b is not defined

Here’s what happens:

1. Memory allocation phase: JavaScript prepares memory for all variables and functions.

2. Execution phase: The code runs. When y() is called inside x(), it looks for b.

3. What goes wrong? In this example, b is not declared anywhere inside y() or x(), and when y is executed, it doesn’t find b in its own scope, x’s scope, or the global scope. As a result, it throws an error: b is not defined.

Scope Chain in Action:

var b = 10;

function x() {
  y(); // calling y
  function y() {
    console.log(b); // looking for b
  }
}

x(); // Output: 10

When y is called, JavaScript looks for b:

• First, it checks y's scope (nothing there).

• Then it checks x's scope (nothing there).

• Finally, it checks the global scope where b is found, and it prints 10.

Closures in JavaScript:

A closure is a function that "remembers" its lexical environment, which means the function retains access to the variables from the scope in which it was created, even after that scope has finished executing.

In simpler terms, a closure is a function that is bound together with its lexical environment.

Basic Example of Closures:

function x() {
  var a = 10;
  function y() {
    console.log(a);
  }

  y();
}

x();

• Explanation:

  • y() is a function defined inside x(). When y() is called, it can access the variable a from its lexical scope (the scope in which it was created).

  • The key idea is that y "remembers" the environment in which it was created (this is what makes it a closure).

Output: 10

Returning a Function that Forms a Closure:

function x() {
  var a = 10;
  function y() {
    console.log(a);
  }
  return y;
}

var res = x();
console.log(res);

• Explanation:

  • When you return the function y, you're returning not only the function but also the lexical environment it was created in (where a = 10).

  • res will now hold a reference to y and still have access to a from x()'s scope, even though x() has finished executing. This is a closure: the function y "closes over" its environment.

Output:

• The console logs the function definition of y because res is the function itself.

• Output: function y(){ console.log(a); }

Closure in Action with a Returned Function:

var res = x();
console.log(res);

• Explanation:

  • When x() is invoked, it returns the function y, which has a closure over the variable a.

  • The function y doesn't lose access to a just because the execution context of x() has finished. This is why when you call res(), y() can still access a.

Output: 10 (Since a = 10 in x() when y was created).

Closures Remember Their Lexical Environment:

closures "remember from where they came." This is key to understanding closures in JavaScript. The returned function "remembers" the environment (variables, values, etc.) that were available when it was created.

So even after x() has finished executing and the stack is cleared, the closure retains the environment it was created in.

Example with Nested Functions and Closures:

function z() {
  var b = 100;
  function x() {
    var a = 10;
    function y() {
      console.log(a, b);
    }
    a = 100;
    return y;
  }
  var func = x();
  func(); // Calling the returned function
}

z();

• Explanation:

  • Inside x(), y() logs both a and b. When you return y, it forms a closure over both variables.

  • Notice that after a is reassigned to 100, the closure will remember the latest value of a (100). Similarly, b will always be remembered as 100, because it's part of the lexical scope where y() was created.

Output: 100, 100