Hello folks! In this part of the series, we'll learn about how Javascript works internally and what's the role of the Execution context.
Understanding how JavaScript code is executed makes reading and writing code easier.
So let's dive into the fundamental core concepts.
Everything in Javascript happens inside an Execution Context
So what exactly is Execution Context?
What is the Execution Context?
Execution context is defined as the environment in which the JavaScript code is executed.
It acts like a big container that has two components in it :
Memory component: It is a place where all the functions and variables are stored as a key-value pair. This memory component is also known as the
Variable environment.Code component: This is the place where code is executed one line at a time. This code component is also known as the
Thread of execution.
Javascript is a "synchronous single-threaded" language.
So, let's understand this one by one.
Single-threaded means JS can only execute one command at a time.
Synchronous means JS can only move on to the next line only when the execution of the current line has been finished.
What happens when you run JS code?
When we run the JS code, there are a lot of things happening behind the screen in the JS engine.
Firstly, an Execution Context is being created.
Let's understand this using a simple example:
var n = 2;
function double(num){
var ans = num * 2;
return ans;
}
var double1 = double(n);
var double2 = double(4);
So when you run this program, Global Execution Context is been created.
This execution context is created in two phases:
- Memory Creation Phase
- Code Execution Phase
Memory Creation Phase
In this phase, Javascript will read the code line by line and allocate memory to all the variables and functions.
When it allocates memory to the variables, it stores a special value undefined.
For functions, it stores the whole function body inside this memory space.
Code Execution Phase
In this phase, Javascript again runs through the code line by line and updates the values of function and variables which are stored earlier in Memory Creation Phase.
After executing line 1: var n = 2;, the Global execution context will look like this:
from line 2 to line 5, there is nothing to execute, so it skips that part.
At line 6:
var double1 = double(n);
Here we invoke a function double(),
Whenever a new function is invoked, a new execution context is been created
So, for the function double(n), JS creates a new execution context.
Phase 1: Memory Creation Phase for newly created execution context will look like this:
Phase 2: Code Execution Phase for newly created execution context will look like:
In this phase, the value of parameter num is updated according to the argument passed to the function i.e. n, which is equal to 2.
Next, the value of ans is updated using the expression num * 2.
Whenever we encounter return statement:
- It gives the whole control back to the execution context where the function was invoked.
- Whole execution context for the instance of that function will be deleted.
After executing line 4: return ans;, the current scenario will look like this:
Value of ans is returned to the variable double1, from where this function is invoked.
Execution context for the function double() is deleted.
After executing line 7: var double2 = double(4);, the same process is repeated as above:
At last 'Global Execution Context' will result in:
When Javascript completes the execution of the entire code, then the Global Execution Context is also deleted.
Call Stack
We know that a function execution context is created every time a function is invoked.
As even the simplest of JavaScript programs have quite a few function invocations, all these function execution contexts need to be managed somehow.
Most of the time, there will be functions that are invoked inside other functions.
To keep track of which one is currently running, a stack is used, where the currently running function execution context is at the top of the stack.
Once it finishes executing, it will be popped from the stack, the execution for the next execution context will resume, and so on until the execution stack is empty.
This stack is called Call Stack.
Call stack maintains the order of execution of execution contexts.
Whenever any Javascript program is run, this Call stack is populated with Global Execution Context. And at the time of any function invocation or creation of a new Execution Context, this stack is populated one by one.
In our case, Initially Call stack is pushed with Global Execution Context:
When it comes to line 6: var double1 = double(n);
After successfully executing function double(n), control returns to Global execution context and Execution context for double(n) is popped out from the stack.
Similarly, for line 7: var double2 = double(4);, Call stack is pushed with "Execution Context for double(4)" .
After successfully executing function double(4), control returns to Global execution context and Execution context for double(4) is popped out from the stack.
When Javascript executed the entire code then Global Execution Context is also popped out from Call Stack. At last Call stack is empty.
Finally!! We learn how Javascript works behind the screen.
Wrap Up
Thanks for reading!! I know this is a lot to consume in a single blog. I hope it was helpful to some extent. Special thanks to Akshay Saini. Please share it with your network. Don’t forget to leave your comments below.
Top comments (3)
Detailed explanation.
Never found such an amazing article on Execution Context. Cheers to you!
Nice one.
if you could've added the Event loop and Callback queue into this article I would've loved it.
@srikanth597 Thank you!! I'll create a separate article explaining these topics