Hello guys, lately I’m still searching for Javascript of things, having read through the closure section. To understand closures, we first need to know what a Lexical Environment is, so let’s find out.
1. Definitions
All functions or code blocks in JavaScript and the Global Object have an anonymous object, called the Lexical Environment . A Lexical Environment has 2 parts:
Environment Record: an object that contains all thelocalvariables as its property and some other information (like the value ofthis).- A reference (treat it as a link) to the external
Lexical Environment.
2. Variables
It can be said that a variable in Javascript (variable) is a property of the Environment Record of that environment. When you are accessing or modifying a variable, it means you are accessing or modifying that property of the Environment Record .
For example:
1 2 3 4 | <span class="token keyword">let</span> phrase <span class="token operator">=</span> <span class="token string">"Hello World"</span> <span class="token punctuation">;</span> phrase <span class="token operator">=</span> <span class="token string">"Goodbye World"</span> <span class="token punctuation">;</span> phrase <span class="token operator">=</span> <span class="token string">"Hello again"</span> <span class="token punctuation">;</span> |
In this example, the phrase variable will be a property of the Environment Record object attached to the Global Object.
- Note: Lexical Environment only exists as specs, it is theoretically only available. There is no way to
getthis object and change it.
3. Function Declarations
When you declare a function in Javascript, that function also becomes a method of Environment Record in that scope. However, when you declare a function, the function is immediately available, even before you declare the function.
1 2 3 4 5 6 7 | <span class="token function">say</span> <span class="token punctuation">(</span> <span class="token string">"Alice"</span> <span class="token punctuation">)</span> <span class="token keyword">function</span> <span class="token function">say</span> <span class="token punctuation">(</span> <span class="token parameter">name</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token string">Hello </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator">-</span> <span class="token operator">></span> Hello Alice |
4. Inner and Outer Lexical Environment
When a function is run, at the beginning of the process, a new Lexical Environment is created to hold variables and parameters.
For example:
1 2 3 4 5 6 7 | <span class="token keyword">let</span> phrase <span class="token operator">=</span> <span class="token string">'Hello'</span> <span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">say</span> <span class="token punctuation">(</span> <span class="token parameter">name</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> phrase <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">say</span> <span class="token punctuation">(</span> <span class="token string">'Alice'</span> <span class="token punctuation">)</span> |
Lexical EnvironmentinnerLexical Environment(of the say function) has an attribute ofname, which is the parameter passed. When calling this function withsay('Alice'), the value ofnameisAliceLexical Environmentoutside thesayfunction (of the Global Object) contains thephraseproperty and also thesayfunction.- Note: when the program wants to find a variable, it will look from the Lexical Environment inside out until it finds the Lexical Environment of the Global Object. In the above example, the program did not find the
phrasevariable inLexical Environmentinside thesayfunction so it looked outside.
Those are the basics of Lexical Environment, we will come back to Closure in the next section. You can read more here .