Working of lexical scope
Let us understand the working of lexical scoping through an example:
let a=7;
let b=10;
const add=() =>
{
let a=6;
return a+b;
}
multiply(); //16

You can also try this code with Online Javascript Compiler
Run Code
Here the function add returns the addition of a and b. a is inside the function but b is not. When we think from JS's point of view, trying to solve the function, JS searches for a and b. It starts searching locally first and expands its search, one area of view at a time until it finds what it's looking for or comes to realize it's impossible to find.
As a result, in this example, JavaScript begins with a search within the function add's local scope. It immediately finds the value of a and moves to b. Because it is impossible to find a value in the local scope, it is shifted to the outer area. It finds b and that's 10 and converts it to 6 + 10, which is 16.
This entire section of code could be inside another function, and then inside another function again. And if it wasn't found here, JavaScript would keep looking all-around function, layer by layer.
That’s how lexical scoping works. The scope of any component is decided by the location of this component within the code.
How does JavaScript create a scope?
Before processing any code, the JS engine transfers it to the compiler. As the compiler parses the code, it notifies the scope manager to define the rules and take care of variables. The scope manager does the desired work assigned to it. JS Engine also asks the scope manager for details about the variables it encounters as it runs the code.
To locate variables accessible in a specific scope, JavaScript implements a scope chain. When a variable is requested, JavaScript searches for it in the current scope before moving on to parent scopes and ultimately the global scope. The scope chain is the aggregate of visited scopes.
Global Scope vs Function Scope vs Block Scope
JavaScript is known to be a functional scoped language. Like other programming languages, JavaScript also provides its function’s own scope. Variables that are declared inside a JavaScript function become local to that function. And they can be accessed only from within the function.
In addition to functional scope, JS has two other scopes also which are the global scope and block scope. Block scope came into view when ES6 was introduced. This became possible due to the two keywords: let and const. Variables declared inside a { } block cannot be accessed from outside the block. One point to note down here is that any variable declared with the var keyword can’t have block scope. Global scope is when the function is declared at the top level or global level and is accessible by all the scripts and functions.
Let us see an example to understand all the three scopes:
{
let x = 2; // block scope
}
Here x can’t be accessed outside the { } block.
function myNinja() {
let ninjaName = "hattori"; //function scope
}
var x = 2; //global scope
X can be accessed anywhere in the program.

You can also try this code with Online Javascript Compiler
Run Code
Must Read Difference Between "var", "let" and "const" in JS
Frequently Asked Questions
What is the scope of an object?
The scope of an object (such as a function or variable) refers to that part where it is accessible and visible to other programs.
What is the lexical scope?
Lexical scoping means that the visibility of variables is determined by the location of the variables inside the nested scopes. In simpler words, we can say that with the help of lexical scoping only we are able to access variables of the outer scope from the inner scope.
What is a scope chain?
To locate variables accessible in a specific scope, JavaScript implements a scope chain. When a variable is requested, JavaScript searches for it in the current scope before moving on to parent scopes and ultimately the global scope. The aggregate of visited scopes is called the scope chain.
What are the three main units of JS Engine which involve in the process of JS code execution?
JS Engine execution thread, Compiler, and Scope Manager are the three main units of JS engine which involve in the process of JS code execution.
Conclusion
To conclude, we discussed the fundamentals of lexical scope in this post. We learned about lexical scoping with an example. We also learned the significance of scope and how lexical scope works in a program. We saw illustrations of lexical scoping in action. We discussed JavaScript's scope chain as well as how JavaScript establishes a scope in its program. Last but not least, we addressed the variations between global, function, and block scope.
We believe that this blog has assisted you in learning more about lexical scoping. This isn't the end; if you're curious to learn more, check out our other javascript articles here. Do upvote our blog to help other ninjas grow.
Happy Coding!