Table of Contents
In this article, you’ll learn about What is Execution context in JavaScript. For any piece of JavaScript code to be executed in a web browser, a lot of processes take place behind the scenes. we’ll take a look at everything that happens behind the scenes for JavaScript code to run in a web browser.
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.
An Animation from blog.webdrip.in , which helps you to understand more clearly how Execution Context works.
Types of Execution Context
There are three types of execution context in JavaScript.
1 Global Execution Context
After loading and parsing the JavaScript code, the JS engine enters the default execution environment. The window object and the this object are created in the global memory by default once the JS engine is inside the global execution environment.
The window object refers to or is connected to the global object, which is always created before the JS engine enters the global execution environment and contains properties and methods like localStorage, innerWidth, and event handlers, among others.
The this object (in the global execution context) is an object that points to or is hooked to the window object.
So, what happens if the JavaScript code has declared variables and functions?
It will search all of the code for all variable and function declarations (variables and functions that are not nested to any other function) and place them in the global memory alongside the window and this object.
2 Local/Function Execution Context
Every time a function is invoked, a brand new execution context is created for that function. Each function has its own execution context, but it’s created when the function is invoked or called. There can be any number of function execution contexts. Whenever a new execution context is created, it goes through a series of steps in a defined order.
3. Eval Function Execution Context
The eval function is a function that should be avoided at all costs. An execution context is constructed and pushed into the call stack whenever the JS engine encounters an eval() function. It evaluates a string that is passed as an argument.
As a result, if you mistakenly sent harmful code as an argument, or if a hostile party uses this area of your code, your website might be badly harmed. This function is not recommended because there are better alternatives.
That’s all for this article and with that, it’s a wrap! I hope you found the article useful. Thank you for reading, If you have reached so far, please like the article, It will encourage me to write more such articles. Do share your valuable suggestions, I appreciate your honest feedback!
Ta da! Having fun learning JavaScript!!
