JavaScript is a beautiful language, since it is loosely typed it is super easy to start coding with it. But to take full advantage of this powerful language one should always know the basics and what else is a better place to start than the execution context!
I am writing this article to help people who are beginners or at intermediate level, so I will try to explain everything in the simplest way possible. Let's begin!
Execution context is a box that is created every time a javascript code is executed. The box is divided into two parts : "memory creation" and "code execution".
Lets take a simple code to understand what goes inside these parts of execution context box.
1. var x = 5;
2.
3. //calculates the cubic value of input
4. function cube (input) {
5. var result = input*input*input;
6. return var;
7. }
8.
9. var cubeFive = cube(x);
10.
11. var cubeTwo = cube(2);
Step 1: A global execution context is created, which has the global object (window), global variable (this) and functions inside it.
JavaScript is a synchronous single threaded language, means the code is executed line by line one at a time, you can think of this as a pointer that moves from top to down the code file and the line at which this pointer is pointing gets executed.
All the variables are assigned a value "undefined" in memory creation phase and all the function definitions are stored the way they are written, i.e. the exact code of the function is stored against the function name.
Step 2: Our pointer starts the memory creation phase.
Step 3: Pointer points at line 1, finds a variable x and assigns undefined to it.
Step 4: Pointer points to line 5, finds a function definition cube and it stores the code as a value of cube.
Step 5: Pointer points at line 9, finds a variable cubeFive and assigns undefined to it.
Step 6: Pointer points at line 11, finds a variable cubeTwo and assigns undefined to it.
Step 7: Now code execution phase begins and the code is executed line by line.
Step 8: Our pointer starts executing the code, first it points at line 1 of code where the value of x which was assigned "undefined" in step 3, is now assigned its original value i.e. 5.
Step 9: Pointer comes at line 5, where it finds a function definition, so it does nothing and moves further ahead.
Step 10: Pointer comes at line 9, again finds a variable cubeFive, but here the value is nothing but a function call! So a very interesting thing happens here, a new box i.e. execution context is created which again has two parts : memory creation and code execution.
Step 11 : Now the pointer goes to the function definition at line 5 and starts to do the same steps, from (1-9) inside the newly created execution context.
Step 12 : Now when the function returns the value at line 6, that particular value is stored in the variable cubeFive at line 9.
Step 13: After this step the new box that was created is now destroyed and all the things inside it, like variables and function definitions are also destroyed.
Step 14: Pointer comes at line 11, again finds a variable cubeTwo, and same steps are repeated again. A new box is created, the pointer goes to the function definition. After it returns a value to the variable at line 11 the box is deleted and pointer is now again pointing at line 11.
Step 15: Since there is no code left to be executed, the global execution that was created at step 1 is also deleted now and yes all the variables and function definitions are also deleted with it.
Congratulations!! now you know the concept of execution context.
And this is how a JavaScript code is executed. This very concept of execution context the forms the fundamental logic behind more advanced concepts like hoisting, call stack, closures, etc.
Keep learning,
Cheers :-)
🗃️ References:
MDN Docs: https://developer.mozilla.org/en-US/
Akshay Saini: https://www.youtube.com/c/akshaymarch7
Top comments (0)