Execution Context: Understanding JavaScript

Understanding Execution context will help in understanding other concepts like hoisting, scope chain, scope, closure, and event loop.

Let’s start with the definition

Execution context is an environment where JavaScript code is executed and evaluated. Simply put, Everything inside JavaScript happens inside the Execution context.

Types of Execution context

Global Execution context: Global EC is the default Execution context. Why default? Well, because as soon as JS code runs, GEC is created.

Try this out: create a .js file and run it. Even though the file doesn’t contain a single line of code, GEC is created.

GEC performs these two tasks:

• It creates a global object for Node.js and Window object for the browsers.

• Reference the Windows object to the ‘this’ keyword.

Functional Execution context: Whenever a function is invoked or called a brand new EC is created. Each function has its own EC, hence there can be any number of FEC.

In the browser context, if the code is executing in strict mode value of this is undefined, else it is a window object in the function execution context.

Eval function Execution context: Code executed inside an eval function gets its own execution context.

The execution context is created in two phases

• Memory Creation phase: In this phase memory is allocated to the variables and functions and is stored in key-value pairs.

• Code Execution phase: In this phase code is executed line by line and values are assigned.

Let’s take a small program to understand better, let’s dive

We already know EC works in two-phase, 1st memory creation and 2nd Code Execution.

In the first phase, JS skims through the code line by line and it allocates memory to variables and functions.

In the case of variables, JS assigned a special keyword undefined. In the case of functions whole code of the functions is copied and assigned.

Let me elaborate on it. Memory is assigned to all global functions and variables.

firstName is assigned a special keyword undefined.

printName being the function whole code is being assigned to it.

displayName is again a variable so, undefined is assigned to it.

In the second phase, JS again runs through the code line by line. Now code is being executed, here all the calculations and evaluation will take place.

As soon as JS encounters function invocation for printName() a brand new EC is created inside GEC, as shown in the above diagram. Again the whole process of creation and execution phase for FEC will be followed.

Now when JS encounters the return keyword, it returns the control of the program where the function was invoked which is GEC and we get the output as John Doe.

After the execution of the whole program, GEC is deleted. One important concept here to understand is the Call stack.

Call stack maintains the order of execution of EC.

Call stack follows LIFO(Last in first out)

In the figure below we can see the call stack for our above code.

Inside the call stack, we have two EC one FEC and the other GEC. You can too try this in the browser by doing inspect and navigating to the source tab.

Don’t forget to add the breakpoints 😇.

Conclusion

We have learned what EC is and how many types of EC are there. We also learned two very important phases of EC and how they work using an example. Getting to know these topics not only expands our knowledge but also we get to know how exactly things work the way they work.

In case I have missed something or you have some advice or suggestions do let me know in the comment section.

You can also reach out to me at
https://www.linkedin.com/in/akhatun/

https://www.instagram.com/readwithamnah/

https://twitter.com/KhatunAmnah

https://readwithamnah.blogspot.com/

Happy coding✌️