Lexical environment in JavaScript

Tram Ho

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:

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 !

Share the news now

Source : Viblo