Every engine have their own codename and are used by different browsers for eg: –
- Google Chrome and Opera use the V8 engine.
- Firefox uses SpiderMonkey
- Microsoft Edges uses “ChakraCore”
- Internet Explorer uses “Chakra”
- And, Safari uses uses “Nitro” and “SquirrelFish”
The V8 engine is one of the most popular and widely used engines as it is developed by Google. And one also reason for it being more popular than other engines because Node.js, Chromium, and Electron.js are all built on top of this engine.
Execution Context is divided into two components, Memory and Code. In the Memory component, all the variables and functions are stored in a key-value pair, It is also known as the Variable Environment. The second component of context is called Code, It is also known as the Thread of Execution because this is the place where the whole code is executed one line at a time.
So here we have one variable ‘n’ and function ‘square’, and there are two more variables ‘square2’ and ‘square4’ which are invoking already created function ‘square’. So when you run this code, the Execution context is created with two of its component.
So you would be thinking what value does the memory components assigns to variables, for our variable n, it stores undefined and in function, it stores whole code, which was inside the function in our program. The same thing, the execution context will store for our variable square2 and square4 which is undefined.
Now in the ‘Code Execution phase’, So now when code starts to execute in line 1, it now replaces undefined stored in n to value 2. After line 1, execution move to the next line where our function is written, here execution sees there is nothing to be done, so they skip the function block and jump into the next line where we have placed ‘var square2’. Now it’s very interesting to see that, when execution comes to square2 variable, it invokes a function, and altogether a new execution context is created.
Again inside the new execution context, it gets dived into two new components called “Memory Creation Phase” and “Code Execution Phase”. So all over again the whole process begins. First, we need to understand the new execution context is only concerned about code inside the function.
So the first phase is the ‘Memory creation phase’, again for variable ‘num’ and ‘ans’, memory is allocated and undefined value is assigned. So after allocating memory, the ‘Code execution phase’ starts, now here we see the square(n) which has value 2, is passed as an argument to function parameter ‘num’, and ‘num’ get value 2. And for and, undefined is replaced by num*num.
So and value will be 4, and then in the next line, there is a return statement, so and value 4 from the local execution context will replace the value of undefined assigned to the value of square2. And finally, the execution context gets terminated.
Then let’s say global context moves to the next line to ‘square4’, and again everything gets repeated which happened with ‘square4’.
After finally, when the whole program is executed, this global Execution Context also gets terminated.
First, we understand what Stack is? A Stack is a data structure similar to Array, but its elements can be directly accessed using an index. ITs follow LIFO (Last In First Out). So in programming, a stack is used to store the order of function. So the latest function gets stacked at the top level, and once the function gets executed, it gets removed from the stack.
So whenever an Execution context is created it gets pushed on top of the stack and when it gets deleted, it gets removed from the stack.
Also read, How to select only one element of a map() in React