Lexical Environment and Scope in JS
Hey There! Here I’m with another interesting topic in JavaScript as the heading says the Lexical Environment and the Scope. Let’s dive deeper into what these terms mean!
Scope in JS is directly linked to the Lexical Environment. By the end of this blog this sentence will totally make sense to you.
Let’s go through some of the examples and try to understand this concept :
The output of the above program will be 10.
The output of the above program will also be 10.
The output of the above program will be an Error mentioning b is not defined.
The output of the above programs varies due to the concept of SCOPE.
Scope is where you can access a specific variable or function in a program.
But what is Lexical Environment? Let me give you a definition first and then move on to the concept:
So, whenever an Environment Context is created Lexical Environment is also created along with it. It contains the local memory of itself i.e., its own Environment context and also of its parents’. To know more about environment context please refer my blog : https://medium.com/@nehaprabhakar008/basics-of-javascript-257898cc6c80
Let’s understand with more clarity by the example below :
Now as we know first thing as soon as program is executed is the creation of Global Execution Context (GEC) where it will 1st assign the memory to all variables and functions and as you can see there is only method a in the global context other methods are inside the method a. Now moving on similarly the EC of function a() and c() are created. Now when the code for c() is started to execute as there is no variable b inside c method. It will check in the lexical environment of its parent. The yellow box above represents the reference to lexical environment of method c() itself and it’s parent a() which further refers it to global execution context which in turn points to null. This flow is known as SCOPE CHAIN, it defines whether or not variable is inside the scope or not, if scope chain is exhausted and variable is not found it is not in the scope chain. Now if after calling the method a() we would have printed variable b in the console it would have given an error as by the time code of GEC is executed the above ECs are deleted as soon as their code is done.
Therefore, we can say c() is lexically inside or in hierarchy to a() and a()is lexically inside Global Scope. Hope the above example provides a clearly view to what is lexical environment and what is scope.
Now there are two quick questions for you which you can now very easily answer:
1. What is the Scope of variable b in the last method?
2. Is b inside the scope of function c()?
Answer these two questions in the comment and I’ll tell you if you’re correct.
Hope this was helpful and easy to understand. If you found this blog helpful please go through my profile and have a look at some other interesting content. See you in next one! :) Until then..