How Javascript works & Execution Context

Everything in Js happens inside an execution context.

The above statement is simple yet very powerful statement to define how Js works in behind the screen and to understand it we must know what is an Execution context. So let me explain you.

Execution context

As soon as you write any code in Js , immediately a big box is created by the Js Engine inside which all your code get's executed and this big box is what known as execution context. This big box is where all your code get's executed by the Js Engine in behind the screen. To be more precise this box is actually named as Global Execution Context as the name sounds its a global place where your code is executed.

Now there are two kinds of execution context ,

1. Global execution context (big box ) which we have already discussed and the
2. Execution context ( small box) which is same to the first one except in one case which is , this execution context created to execute the code inside a function . Yes you heard me right, functions have a special place in js , they are like the heart of the Js and they are like mini programs . Whenever a function is run a new execution context is created.

When Js engine initially executes or run code , all code first enters into a global execution context by default and thereafter each function invocation will result in creation of a new execution context.

How Execution context is created ?

Execution context is created in two phases

1. Memory Creation Phase : In this stage Js engine scans through your entire program and allocates memory to all the functions and variables. Remember this stage takes place before executing any code , which means Js has the memory of your entire program even before executing a single line of code.
   • Variables are assigned the value of undefined . ( Here undefined is used as placeholder value to reserve the place)
   • Functions are assigned the value of functions itself. ( whatever the value is )

This phase is also known as Variable Environment since its sort of an environment where the variables and functions are stored in key value pairs.

1. Code Execution Phase : In this place the actual code is executed
   • Variables are assigned their actual value.
   • Functions are executed . ( when invoked) This phase is also known as thread of execution

What is Call Stack and how it connected with execution context?

Call Stack maintains the order of execution of all execution contexts. It is a stack of all execution contexts, as we know that Js engine creates an execution context for every single function that means there is going to be many execution contexts in a application and Call stacks maintains all these execution contexts

When you write code in Js a global execution context is created and immediately it is send to the call stack straight at the bottom and there after once the code execution phase starts , each function invocation creates a new execution context and pushed to the call stack once the function is executed , the execution context is thrown out of the call stack and this process continues till the entire code gets executed . At the end when all code gets executed the global execution context is also thrown out of the call stack.

Javascript is a synchronous single threaded language

• Synchronous The code is executed in order that means only after executing one line of code js engine will move on to the next line ,
• Single threaded : Js can execute one command at a time, only one command is executed at a time similar to single thread.

Conclusion:

This was all about the Execution context . If you've reached this point, Thanks for taking your time and reading this article, hope you've enjoyed reading it and found it helpful. Do not hesitate to share your feedback.