Behind the scenes in JS

Hey everyone. Hope you all are doing great. This is my first blog and I hope that you will like and share it among your tech buddies.

Today I am going to walk you through Execution Context in JS.I have been coding in JavaScript for the past few months and I found out that many people miss out on this topic. Especially if you are a beginner, this is a must read.This topic is a base for learning advanced topics like hoisting, closure and scope chain.

Execution context is an environment where everything happens in JS. All your memory allocations and code executions.

There are 3 types of execution contexts:

1. Global execution context (GEC) – GEC is where all your global variables and functions are stored.There can not be more than one GEC in JS as it is a single threaded language.
2. Functional execution context (FEC) – FEC is created each time a function is called in JS. There can be ‘n’ number of FECs, since there can be many functions called from a JS file.
3. Eval : Execution context inside eval function.

Execution context has a stack data structure where it follows a last in first out(LIFO) data structure.Always GEC will be pushed first followed by FECs.Each FEC will be popped once it is fully executed.
You can refer the figure below for more clarity on this.

As each function gets executed , it gets popped out of the stack.

Execution context in JavaScript engine happens in 2 steps:

1. Creation phase – this is the phase where memory is allocated to all your variables and functions.
2. Code execution phase – this is the phase where our code logic is executed.

Don’t worry if you did not get what I wrote above, I will help you understand with an example.You just have to keep reading for that😃.

Let's look at this simple program of adding two numbers

let a = 10
let b = 20
function add(a, b){
   let num1 = a
   let num2 = b
   return num1+num2
}
let result = add(a, b)
console.log(result)

We all know that the output is "30".But let's dive in to know what actually happened to get us this output.

First phase is where we allocate memory to all the variables and functions in GEC. It will look something like this:

GEC is then pushed inside the stack.

Second phase is where the code starts to execute and starts assigning values to those variables we created. It is to be noted here that every time a function is called, it creates a new execution context.

As the code starts to execute, variables 'a' and 'b' gets assigned their respective values and when function 'add' is called, it creates a new execution context.This function execution context is then pushed into the stack.

once the code in function "add" gets executed, it returns the value '30' and function execution context is removed and popped out of the stack.

Once JS executes the last line .i.e printing the 'result' global execution context gets removed and hence popped out of the stack.
This is what happens when you execute every JS program. Hope you would remember execution context when you write your next JS program.

Please feel free to give your comments below. I wanted to show you the full flow by using debugger , but it will make this article too long.May be i will include that in the next post😃.

Thank you