<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Gaurav Singh</title>
    <description>The latest articles on DEV Community by Gaurav Singh (@gauravsingh7x).</description>
    <link>https://dev.to/gauravsingh7x</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3943940%2Fd7aa87a2-7717-4d82-a724-896d146d3cd2.png</url>
      <title>DEV Community: Gaurav Singh</title>
      <link>https://dev.to/gauravsingh7x</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/gauravsingh7x"/>
    <language>en</language>
    <item>
      <title>JavaScript Lexical Scope, Lexical Environment, Scope Chain &amp; Closure — Explained Like the JS Engine</title>
      <dc:creator>Gaurav Singh</dc:creator>
      <pubDate>Thu, 25 Jun 2026 17:23:17 +0000</pubDate>
      <link>https://dev.to/gauravsingh7x/javascript-lexical-scope-lexical-environment-scope-chain-closure-explained-like-the-js-engine-2hle</link>
      <guid>https://dev.to/gauravsingh7x/javascript-lexical-scope-lexical-environment-scope-chain-closure-explained-like-the-js-engine-2hle</guid>
      <description>&lt;p&gt;Most developers memorize the definitions of &lt;strong&gt;Lexical Scope&lt;/strong&gt;, &lt;strong&gt;Lexical Environment&lt;/strong&gt;, &lt;strong&gt;Scope Chain&lt;/strong&gt;, and &lt;strong&gt;Closure&lt;/strong&gt; without understanding what actually happens inside the JavaScript engine.&lt;/p&gt;

&lt;p&gt;In this article, we'll build these concepts step by step and understand them from the engine's perspective.&lt;/p&gt;




&lt;p&gt;What Does "Lexical" Mean?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Lexical&lt;/strong&gt; means:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;"Based on where things are written in the source code."&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;JavaScript determines variable access by looking at the &lt;strong&gt;physical location&lt;/strong&gt; of functions in your code—not where they are called.&lt;/p&gt;




&lt;h1&gt;
  
  
  &lt;a href="https://medium.com/@gauravsingh7x/javascript-lexical-scope-lexical-environment-scope-chain-closure-explained-like-the-js-engine-dc090baa273a" rel="noopener noreferrer"&gt;1. Lexical Scope&lt;/a&gt;
&lt;/h1&gt;

&lt;p&gt;A function can access:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Its own variables&lt;/li&gt;
&lt;li&gt;Variables from its outer scope&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The scope is determined by &lt;strong&gt;where a function is defined&lt;/strong&gt;, &lt;strong&gt;not where it is executed&lt;/strong&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;dynamicVar&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;I'm Global&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;checkScope&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;dynamicVar&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;anotherFunction&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;dynamicVar&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;I'm Local&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nf"&gt;checkScope&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Function is called here&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;anotherFunction&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Output
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;I'm Global
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Why?
&lt;/h2&gt;

&lt;p&gt;Before execution begins, JavaScript analyzes the source code and decides which variables every function can access.&lt;/p&gt;

&lt;p&gt;This rule is called &lt;strong&gt;Lexical (Static) Scope&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Although &lt;code&gt;checkScope()&lt;/code&gt; is called inside &lt;code&gt;anotherFunction()&lt;/code&gt;, it was &lt;strong&gt;defined in the global scope&lt;/strong&gt;, so it only has access to the global &lt;code&gt;dynamicVar&lt;/code&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  What If JavaScript Used Dynamic Scope?
&lt;/h2&gt;

&lt;p&gt;If JavaScript used &lt;strong&gt;Dynamic Scope&lt;/strong&gt; (which depends on where a function is called), the output would be:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;I'm Local
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But JavaScript &lt;strong&gt;doesn't&lt;/strong&gt; work this way.&lt;/p&gt;




&lt;h2&gt;
  
  
  Lexical Scope Search Path
&lt;/h2&gt;

&lt;p&gt;Before execution starts, JavaScript builds a blueprint of variable accessibility by analyzing the code structure.&lt;/p&gt;

&lt;p&gt;Think of it as answering this question:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;"Which variables can each function access?"&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That blueprint is called &lt;strong&gt;Lexical Scope&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  &lt;a href="https://medium.com/@gauravsingh7x/javascript-lexical-scope-lexical-environment-scope-chain-closure-explained-like-the-js-engine-dc090baa273a" rel="noopener noreferrer"&gt;2. Lexical Environment&lt;/a&gt;
&lt;/h1&gt;

&lt;p&gt;A &lt;strong&gt;Lexical Environment&lt;/strong&gt; is an internal object created whenever JavaScript starts executing a scope.&lt;/p&gt;

&lt;p&gt;It stores:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Local variables&lt;/li&gt;
&lt;li&gt;Function declarations&lt;/li&gt;
&lt;li&gt;A reference to its parent lexical environment&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It consists of:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Environment Record&lt;/strong&gt; → Stores variables and functions&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Outer Reference&lt;/strong&gt; → Points to the parent lexical environment&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Together, these make variable lookup possible.&lt;/p&gt;




&lt;h1&gt;
  
  
  Scope Chain
&lt;/h1&gt;

&lt;p&gt;The &lt;strong&gt;Scope Chain&lt;/strong&gt; is formed by connecting lexical environments through their &lt;strong&gt;Outer References&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;When JavaScript can't find a variable in the current scope, it walks up this chain until it either finds the variable or reaches the global scope.&lt;/p&gt;




&lt;h2&gt;
  
  
  Easy Way to Remember
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Lexical Scope&lt;/strong&gt; is the rule that defines what a function can access.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Lexical Environment&lt;/strong&gt; is the place where those variables are actually stored.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Interview Definition
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Lexical Scope defines what a function can access, while the Lexical Environment stores those variables and maintains the relationship between parent and child scopes.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;globalVar&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;I am Global&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;outerFunction&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;outerVar&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;I am Outer&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;innerFunction&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;innerVar&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;I am Local&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;innerVar&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;outerVar&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;globalVar&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;innerFunction&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;outerFunction&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Output
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;I am Local
I am Outer
I am Global
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  What Happens Behind the Scenes?
&lt;/h1&gt;

&lt;p&gt;When &lt;code&gt;innerFunction()&lt;/code&gt; starts executing:&lt;/p&gt;

&lt;p&gt;JavaScript creates a brand new &lt;strong&gt;Lexical Environment&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;It contains:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Lexical Environment (innerFunction)

Environment Record
------------------
innerVar

Outer Reference
      ↓
Lexical Environment (outerFunction)

Environment Record
------------------
outerVar

Outer Reference
      ↓
Global Lexical Environment

Environment Record
------------------
globalVar
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now suppose JavaScript needs &lt;code&gt;outerVar&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;The lookup process becomes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Current Scope
      ↓
Parent Scope
      ↓
Global Scope
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This lookup path is called the &lt;strong&gt;Scope Chain&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  &lt;a href="https://medium.com/@gauravsingh7x/javascript-lexical-scope-lexical-environment-scope-chain-closure-explained-like-the-js-engine-dc090baa273a" rel="noopener noreferrer"&gt;3. Closure&lt;/a&gt;
&lt;/h1&gt;

&lt;p&gt;A &lt;strong&gt;Closure&lt;/strong&gt; is formed when a function &lt;strong&gt;remembers and retains access to its outer lexical environment even after the outer function has finished execution.&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.linkedin.com/in/gauravsingh7x/" rel="noopener noreferrer"&gt;In My Style&lt;/a&gt;
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;When we return an inner function, pass it as a callback, or store it in a variable, and it carries its lexical environment along with it, that is called a Closure.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;outerFunction&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;innerFunction&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;innerFunction&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fn&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;outerFunction&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nf"&gt;fn&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nf"&gt;fn&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nf"&gt;fn&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Output
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;11
12
13
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  Why Doesn't &lt;code&gt;a&lt;/code&gt; Disappear?
&lt;/h1&gt;

&lt;p&gt;Normally, when &lt;code&gt;outerFunction()&lt;/code&gt; finishes execution, its execution context is removed from the call stack.&lt;/p&gt;

&lt;p&gt;But JavaScript notices that &lt;strong&gt;&lt;code&gt;innerFunction&lt;/code&gt; still needs &lt;code&gt;a&lt;/code&gt;.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Instead of destroying that memory, JavaScript keeps the lexical environment alive.&lt;/p&gt;

&lt;p&gt;The returned function holds a hidden reference to it.&lt;/p&gt;

&lt;p&gt;This preserved relationship is called a &lt;strong&gt;Closure&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  One Snap &amp;gt; 100 Closure Definitions 📸
&lt;/h1&gt;

&lt;p&gt;Someone asks:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;"Where is the closure?"&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Open Chrome DevTools:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;dir&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;fn&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Expand:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;[[&lt;/span&gt;&lt;span class="err"&gt;Scopes&lt;/span&gt;&lt;span class="p"&gt;]]&lt;/span&gt;&lt;span class="w"&gt;

&lt;/span&gt;&lt;span class="err"&gt;Closure&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;(outerFunction)&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="err"&gt;a:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;13&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;There it is.&lt;/p&gt;

&lt;p&gt;That hidden &lt;strong&gt;Closure&lt;/strong&gt; object is the preserved lexical environment that keeps your variables alive even after the outer function has returned.&lt;/p&gt;




&lt;p&gt;&lt;a href="https://medium.com/@gauravsingh7x/javascript-lexical-scope-lexical-environment-scope-chain-closure-explained-like-the-js-engine-dc090baa273a" rel="noopener noreferrer"&gt;Final One-Line Difference&lt;/a&gt;&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Concept&lt;/th&gt;
&lt;th&gt;Meaning&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Lexical Scope&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Defines what a function can access.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Lexical Environment&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Stores variables and references to parent scopes.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Scope Chain&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;The path JavaScript follows to find variables.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Closure&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;A function together with the preserved lexical environment it remembers after the outer function has finished execution.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h1&gt;
  
  
  &lt;a href="https://medium.com/@gauravsingh7x/javascript-lexical-scope-lexical-environment-scope-chain-closure-explained-like-the-js-engine-dc090baa273a" rel="noopener noreferrer"&gt;Key Takeaways&lt;/a&gt;
&lt;/h1&gt;

&lt;p&gt;⟶ Lexical means &lt;strong&gt;where code is written&lt;/strong&gt;.&lt;br&gt;
⟶ Scope is determined during parsing, not during function calls.&lt;br&gt;
⟶ Every executing scope gets its own Lexical Environment.&lt;br&gt;
⟶ Lexical Environments are connected through Outer References.&lt;br&gt;
⟶ Those references create the Scope Chain.&lt;br&gt;
⟶ A Closure keeps a lexical environment alive as long as a function still references it.&lt;/p&gt;

&lt;p&gt;If this article helped you understand what's happening &lt;strong&gt;inside the JavaScript engine&lt;/strong&gt;, consider leaving a ❤️ and sharing it with fellow developers.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://medium.com/@gauravsingh7x/javascript-lexical-scope-lexical-environment-scope-chain-closure-explained-like-the-js-engine-dc090baa273a" rel="noopener noreferrer"&gt;Happy Coding!&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>lexical</category>
      <category>closure</category>
      <category>lexicalscope</category>
    </item>
  </channel>
</rss>
