What are the Lexical Scope in JavaScript?

Lexical scope in JavaScript means that the scope of a variable is determined by its position in the source code (where it is written) and the nested structure of functions.

In other words:

• Inner functions have access to variables declared in their outer functions.
• Functions are executed using the scope in which they were defined, not where they are called.

---

How Lexical Scope Works:

When JavaScript looks for a variable, it starts in the local scope (inside the current function), and if it doesn’t find it there, it moves up to the outer scope (where the function was defined), and continues going up until it reaches the global scope.

This process is called Scope Chain.

---

Example of Lexical Scope:

javascriptCopyEditfunction outerFunction() {
  let outerVar = 'I am from outer';

  function innerFunction() {
    let innerVar = 'I am from inner';
    console.log(outerVar); // Accessing outer variable
    console.log(innerVar); // Accessing inner variable
  }

  innerFunction();
}

outerFunction();

Output:

cssCopyEditI am from outer
I am from inner

• innerFunction() has access to outerVar because of lexical scope.
• outerFunction() doesn’t have access to innerVar because it is inside the inner scope.

---

Key Points to Remember:

Concept	Description
Lexical Scope	Scope is defined by where variables and functions are declared (written), not where they are called.
Scope Chain	If a variable is not found in the current scope, JS looks in the outer scope and continues until the global scope.
Inner Functions	Have access to variables in their outer functions.
Global Scope	Accessible from anywhere in the code.
Local Scope (Block/Function Scope)	Accessible only within the block or function where it’s declared.

---

Practical Example Using Scope Chain:

javascriptCopyEditlet globalVar = 'I am global';

function outer() {
  let outerVar = 'I am outer';

  function inner() {
    console.log(globalVar); // Accesses global scope
    console.log(outerVar);  // Accesses outer scope
  }

  inner();
}

outer();

Output:

cssCopyEditI am global
I am outer

This demonstrates lexical scope and how JavaScript looks up variables using the scope chain.

---

Summary:

✅ Lexical scope is based on the structure of your code (where functions and variables are written).
✅ Inner functions can access variables from outer functions (scope chain).
✅ Scope is determined at the time of writing, not at runtime.

This concept is fundamental to closures, callbacks, and modern JavaScript development.