Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
1.1.
Example of Lexical Scope
2.
What is the significance of scope?
3.
Working of lexical scope
4.
How does JavaScript create a scope?
5.
Global Scope vs Function Scope vs Block Scope
6.
Frequently Asked Questions
6.1.
What is the scope of an object?
6.2.
What is the lexical scope?
6.3.
What is a scope chain?
6.4.
What are the three main units of JS Engine which involve in the process of JS code execution?
7.
Conclusion
Last Updated: Mar 27, 2024

Lexical Scoping

Author Shivani Singh
0 upvote
Roadmap to SDE career at Amazon
Speaker
Anubhav Sinha
SDE-2 @
25 Jun, 2024 @ 01:30 PM

Introduction

The lexical scoping can be defined as the set of rules which are imposed on the program's variables and functions. Or in other words, we can say that 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. The child function is seen to have lexically bound the parent function. It is also known as static scoping. 

Due to lexical scoping, a function is able to access variables from the parent scope to the global scope. We can access all the variables of the outer scope from the inner scope, but the inverse doesn't hold true. We cant access variables of the inner scope from the outer scope. And this is due to the lexical scoping only. Lexical scoping only permits variable declared outside of a function can be accessed within another function declared after the variable declaration. And point to be noted here is that the inverse doesn't hold true. 

Example of Lexical Scope

Check out the following code:

//defining a variable in the global scope
const myLexScope = “Understanding lexical scope”;
//call myLexScope variable from a function
function getLexScope(){
	return myLexScope
}

 

In the snippet above, we have declared a variable name myLexScope in the global scope. And then, we are trying to call this variable inside another function declaration. As this variable’s scope is global, it can be accessed from anywhere in the program. So, myLexScope’s lexical scope is global. 

What is the significance of scope?

The scope is needed in the programming language because it helps the compiler decide where to look for a particular variable. It helps in accessing the variables. While some variables may be accessed from anywhere in the program, others may be available only in a certain location. And for that, we need to specify their scope. Suppose we don't define the scope of the variables, then the JS Engine won't be able to decide where it needs to look for that particular variable. And eventually, it will trigger a reference error. So to escape from this error, we need the scope.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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

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.


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!

Previous article
JavaScript Boxing and Unboxing
Next article
Explain "this" keyword and Scope of this in Javascript Arrow Functions
Live masterclass