{"componentChunkName":"component---src-templates-blog-post-js","path":"/execution-context-lexical-environmenet-scope-chain","result":{"data":{"markdownRemark":{"id":"6ad00ece-8ecb-51cb-8b1e-8c743dd59998","html":"\n

Hey guys,

\n

So execution context, lexical scope, and scope chain are sort of fundamental topics in JS so it's important to learn about it

\n

Let's get started

\n

Execution Context

\n

Now we know about the call stack (if you don't please refer to the last blog post here) and we know that functions that are called goes onto the call stack and after returning the functions they are popped off the call stack and it gets empty

\n

We can say that every function that goes into the call stack has its execution context

\n
function hello(){\n return \"Hey guys\"\n}\n\nfunction greetings(){\n return hello()\n}\n\ngreetings()
\n

Let's see this with an example

\n

So in the above example when the JS engine encounters the function call greetings( ) it makes an execution context of that function and puts it onto the call stack and after that, it encounters hello( ) and makes its execution context and puts it onto the stack and finally, it returns \"Hey Guys\" and everything pops off one by one.

\n

A new execution context is created whenever a function is executed as the JS engine goes through the code

\n

\n \n \n \n \n
Execution Context
\n

\n

But always the very first execution context is the \"Global Execution Context\" which is defined even before any code is written in the JS file

\n

The Global execution context has the global object which is the window object, the \"this\" keyword, and hoisting.

\n

It has two phases the creation phase and the execution phase

\n

In the creation phase, there is the window object, \"this\" keyword, and hoisting and

\n

In the execution phase, the code is run

\n

As you might know at the beginning the \"this\" keyword and the window object are the same

\n

\n \n \n \n \n
Global Execution Context
\n

\n

Lexical Environment

\n

Before going into the lexical environment, let's understand what lexical means well it means where you write something or define something

\n

So, as we know that when our program is run we have execution context of functions on the call stack and you can understand the lexical environment as each function has its planet where its variable is located and no one outside of the planet can use those variables

\n

Let's understand this with an example

\n
function hello(){\n console.log(\"hell\")\n const a = 10\n}\n\nfunction greet(){\n console.log(\"greet\")\n const b = 20\n hello()\n}\n\nfunction start(){\n console.log(\"starting greet\")\n const c = 30\n greet();\n}\n\nconst d = 40\n\nstart()
\n

Here as you can see when the start() function is called, it starts execution each function one by one, now if you want to see this in action please go to this (latentflip) website and copy-paste the code

\n

So as you can see the hello function has variable a but the function hello doesn't have access to other variables like the variable b or c because they on another function but it does have access to variable d because it's on the global scope or environment

\n

Similar is the case with variable b or c because they are both inside their respective functions and only have access to their variables and that's what lexical environment means

\n

That's why I said to image each function that goes onto the call stack and an execution context is created and it has its planet as well and no one other the function itself can access that planets variables

\n

\n \n \n \n \n
Lexical Environment
\n

\n

The same thing can be done with the functions as well we can define functions inside of each other and stuff like that which we are going to cover in the scope chain

\n

So just remember that when we say lexical environment it just means where is that variable or function written in our code

\n

Scope chain

\n

Let's see and learn about what scope chain is

\n

What it does is that when the Js engine first parses through the code it just links functions and variables around it on where they are written

\n

Now how it does that well depends majorly on where the function is defined so if the function is defined like this eg

\n
function hello(){\n console.log(\"hell\")\n}\n\nfunction greet(){\n console.log(\"greet\")\n hello()\n}\n\nfunction start(){\n console.log(\"starting greet\")\n greet();\n}
\n

Now as you can see in this example the functions are defined on the main body of the program that means they are linked or their execution context is linked directly to the global execution context

\n

So that means where ever if we define a variable in the global execution context every function will have the access to it

\n

Every function is individually linked to the global execution context

\n

But in this example

\n
function start(){\n console.log(\"hell\")\n var a = \"a\";\n return function hello(){ \n var b = \"b\";\n return function greet(){\n  var c = \"c\";\n    return \"Ok\";\n }\n}\n}\n\nstart() // this will invoke function hello()\nstart()() // this will invoke function greet()\nstart()()() // this will return Ok
\n

As you can see in the above example we are defining the function one inside the another and that means the scope chains of the functions will be linked to each other, and that is the most important thing to understand in the scope chain

\n

Here you can also understand each function as an individual planet

\n

— So the bigger planet global has the planet start inside of it and the planet start will have hello inside of it and finally, we will have planet greet inside of it

\n

Always remember that the planet greet which is inside of everybody will have access to every variable but no one has access to the variables of greet

\n

For the planet hello it will have access to every variable except for greet's variable environment

\n

For the planet start it will have access to the global variables but not the planet's inside of it

\n

For more explanation:-

\n
    \n
  1. Let me explain how these functions are linked to each other - so the last function or the last child named greet( ) will have access to both var a and var b because they are their parent
    2. \n
  2. Now for hello( ) it has access to var a but it doesn't have the connection with greet( ) which is variable c so if you try to console.log(c) then it will throw a reference error
    3. \n
  3. For a start( ) it only has access to var its variable but not b or c and similarly it will give a reference error if we try to access those
    4. \n
\n

But the common thing is that every function has access to the global scope and its variables

\n

That's what scope chain is in Javascript

\n

Before I leave here is an important difference between functional and block scope which I guess you should also know

\n

Function scope and block scope

\n

Initially, Js could only use function scoping as we have studied before and most of the other programming languages have block scoping

\n

eg

\n
if(5>4){\n var secret = \"555\";\n}\n\nfunction secret(){\n var secret2 = \"555\";\n}\n\n//In javascript we can access the secret variable from here like outside of the if statement\n//but we can't access secret2 and thats why Js is called function scoped\n\n\nconsole.log(secret) // \"555\"\nconsole.log(secret2) // reference error\n\n// But in many other programming languages we can't access that the secret variable \n// because they are block scoped
\n

But if we use let and const instead of var in the If statement then Js will also be able to use block scoping and we won't be able to access the variable secret from outside of the if statement

\n

Well these are concepts and theory of execution context, lexical scope, and scope chain, I hope you enjoyed learning it and understanding the stuff

\n

Was the article helpful? Do you have any doubts? Any topic you would like us to cover?

\n

Reach out to us on Twitter and Instagram where we try to provide more value in threads and carousal formats

\n

Thank You for your time

\n

Keep learning, Keep coding :)

\n","excerpt":"Hey guys, So execution context, lexical scope, and scope chain are sort of fundamental topics in JS so it's important to learn about it Let's get…","frontmatter":{"date":"April 08, 2021","slug":"/execution-context-lexical-environmenet-scope-chain","title":"Execution Context, Lexical Environment and Scope chain","description":"Understand the most core of Javascript about execution context, lexical environment, and scope chain ","featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC4ElEQVQozzWTy28bVRTGz70zTuKxnTqO4zgPx3GIQ+JHOokTK81LeZU8XDsmmDSuo0AJVUFVRFQKAoF4qghEpbJgBYtKLFB33ZQFEuwrJNixYgOb/gPddFP9OEFicXTvjGZ+Ot93viPGFjCmSMD4eDJD1JRJyAUGzRLPySo58wK+2aZsqlwwdea15qTOlFQ4sl9yJ/gbN0I/8VbPQz48eYoYm8eaSdpkmrDMElNYnyySNiuMyUVysoMvVWZljyVpsN5xwLJtcNV8yl33Z9537tMKfMdHyb+ZH/tTge4kIudxbJl2u0DYLhNz1+iSTZYza/x6L8ej+3ke/Vikka5QVnAzfIt3ne+5bu5w5NzmNPiAVe8H/f8S4sUvYtwy0raoD+tIaBPn3A7i1pgrb/DscYp/fk/yxy+9HPobLMoxTec96t4pW/aElvMF9bZPeN5pqVLluMkqwZ4q0rmBdG0heneSNSTyEuXVHZ781c+9bzr5+uMwVwpVBV5nwe5TsruseNeYc66RN02GA/t4IW3EDFQwiQYm2UCiCuyuKLSOxPZJZCu8dliidcnneLvMYrTOhPqZVW9H1ZK0bDDUXqFXavQ5VaLxbcQOqO5EHdvbJDr+KsGhfSJjrxMaPiTYf6A2HBFxDnTqLXLeHrnIDhORCmOdW6S9NQYjqwxrA33eLuHYpgJjSu3Zw3Y3GJl9m8zKZ4wu3GKgeMzg5A2K5RPmSm/gZy4zO3IZP7VHQW2aGW3gj7zI+WydQnaXgUSN9nOq0ARKOgiV2X0FSd5E+k/11HviSN81CcV3KRZfIRWv0KmRimi0wlIiKFO0azpcKWpKJrAyide1fpbDcZ3MskI+wGZuq59vYlM3CWZOSeeukp1QuakahfGXGU1V8MwMQVOiw05rTKYIWB/XnkUvjzgFBTpLSPgdpPdblf450vcVMnQXGz/G7ZjXD2Z0k6Yx4uNouWenLoLV7fq/jDkD5f/r9F+Va1OJf7efIgAAAABJRU5ErkJggg==","aspectRatio":1.7412935323383085,"src":"/static/8d7e2f1b33ddce39c714a8c755ec9fb8/03979/cover-image-execution-context.png","srcSet":"/static/8d7e2f1b33ddce39c714a8c755ec9fb8/6cdeb/cover-image-execution-context.png 350w,\n/static/8d7e2f1b33ddce39c714a8c755ec9fb8/b1dd8/cover-image-execution-context.png 700w,\n/static/8d7e2f1b33ddce39c714a8c755ec9fb8/03979/cover-image-execution-context.png 800w,\n/static/8d7e2f1b33ddce39c714a8c755ec9fb8/1783d/cover-image-execution-context.png 1050w,\n/static/8d7e2f1b33ddce39c714a8c755ec9fb8/942ca/cover-image-execution-context.png 1400w,\n/static/8d7e2f1b33ddce39c714a8c755ec9fb8/b5274/cover-image-execution-context.png 3000w","sizes":"(max-width: 800px) 100vw, 800px","maxHeight":459,"maxWidth":800},"sizes":{"src":"/static/8d7e2f1b33ddce39c714a8c755ec9fb8/ee604/cover-image-execution-context.png"}}}}}},"pageContext":{"id":"6ad00ece-8ecb-51cb-8b1e-8c743dd59998","previous":{"id":"61811465-56e5-5327-be6c-9f56efe6ff5b","frontmatter":{"slug":"/how-javascript-works","template":"blog-post","title":"How Javascript works?"}},"next":{"id":"32bfe0f7-810a-5b97-b196-7215a5b03ade","frontmatter":{"slug":"/what-is-hoisting-in-javascript","template":"blog-post","title":"Hoisting in Javascript"}}}},"staticQueryHashes":["228695001","3868140423"]}