Before learning about scope
, scope chain
, or even closures
, you need to understand the Lexical Environment
.
This is a fundamental concept in JavaScript.
Execution Context and Callstack
Recalling from the post “What happens when you run a JavaScript program?” , each time the JavaScript program executes, will initialize the “Execution Context”
And there are two phases of execution context, “Memory Creation” and “Code Execution” .
The example has the following code:
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">function</span> <span class="token function">x</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token number">10</span> <span class="token punctuation">;</span> <span class="token function">y</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">y</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> c <span class="token operator">=</span> <span class="token number">5</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token function">x</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
then the diagram describing the execution contexts and callbacks created with the above program is as follows:
Lexical Environment & Scope Chain
I have chosen the cover image for this article as the image of the earth seen from outer space, which is the similarity when talking about the lexical environment. Let’s find out together!
What is Lexical?
English “Lexical” means connection from outside in a certain order.
What is Lexical Environment?
A function’s “Lexical Environment” includes the function’s local memory plus its parent’s “Lexical Environment”.
For example, the above function y
is nested inside the function x
( y
is a child of x
), and the function x
is inside the global scope
( x
is a child of global
).
Also called y is lexically inside the x function. x is lexically inside global
.
As soon as an “Execution Context” is initialized, a “Lexical Environment” is also initialized.
Let’s see the corresponding parent’s lexical environment in the example above:
And Lexical Environment
will include local memory
and parent lexical environment
represented with purple circle below.
Scope Chain
Looking at the image above, can you see how the program looks up the values of the variable?
The search order will be from the purple ring of y
to the purple ring of x
and then to the purple ring of global
and still not found, it will encounter null
and end this search.
Assuming c
does not exist at the violet ring x
as above, the program will continue to look for the purple rings y
, then global
.
If it is still not found, an error will be reported. If it is found somewhere first, then the local value will be used.
These are the things that JS Engine looks for from the inside out, called Scope Chain .
Or to put it more simply, the Scope Chain is the chain of the Lexical Environments.
If the variable is not found in the local memory
of the execution context
, it will search the lexical environment
until the end of the string.
summary
– Lexical Environment
created with Execution Context
– Lexical Environment = local memory + parent's Lexical Environment
Chain of Lexical Environment called Scope Chain
So what about scopes ? Scope is related to this lexical environment?
Please look forward to reading the next article about scope !