Before we begin to understand what an execution context is, let's think of it as an environment/ scope where the code is evaluated in.

Deep Dive

When we start the JavaScript program, we start in the global execution context. Some variables are declared within the global execution context, called global variables.

When the program calls a function, this is what actually happens:

1. JavaScript creates a new execution context, a local and temporary execution context.
2. This execution has its own set of variables, which are local to that execution context.
3. This execution context is pushed on the call stack. The call stack is JavaScript's way of keeping a track of where the thread of execution is at that point in time.

Now you might be wondering when does this function end?

When it encounters a return statement or it encounters a closing bracket }.

When a function ends, the following happens:

1. The function sends the return value back to where it was called from. If the function has no return statement, undefined is returned.

2. The local execution context is popped off the call stack.

3. Then a very interesting thing happens. As I mentioned earlier that the local execution context is temporary, it is Destroyed. All the variables that were declared within the local execution context get erased. They are no longer available.

A basic example

Now, let's look at an example to understand this in more detail.

1 : const num = 3;

2: function multipltBy2(inputNumber){

3: const result = inputNumber * 2;

4: return result;

5: }

6: const output  = multiplyBy2(num);

Let's break this down and leave no stone unturned to get a very strong grasp on the thread of execution and execution context today.

1. On line 1, we are declaring a const num in the global execution context and assigning it the value of 3.

2. Now pay Attention‼ On line 2, we are declaring a function multiplyBy2 again in the global execution context and storing some code, which is inside the curly brackets, in it's body (function body). This code inside the function body is not evaluated, just stored for future use.

3. Now we jump to line 6 where we declare a const output and we are making a function call to multiplyBy2. Till now we were in the global execution context.

4. Now we as we've made a function call to multiplyBy2 denoted by the parenthesis, JavaScript will create a brand new execution context which will be local to the function multiplyBy2.

5. This local execution context is now pushed on the call stack and has a local memory with the variable inputNumber in it.

6. This variable is assigned the value of 3 as it was passed while calling the function (num =3).

7. Inside this local execution context we are declaring a const result on line 3 to which we are assigning the value inputNumber times 2(which is 6).

8. On line 4, we are returning the value of result, i.e 6, to the place where the function multiplyBy2 was called initially.

9. The working of the function is complete as we encountered the return statement.

10. Now, the local execution context of multiplyBy2 is popped off the call stack and is destroyed! All the local variables that were there inside it (inpuNumber, result) are no more available unless the function is called again.

That was a very long winded explanation for a very simple program, but it is an important topic that needs to be understood in depth.

📍I hope I was able to clear your doubts you might be having before reading this.

📍It's my first time writing a blog, all feedbacks are welcome.

📍If you enjoyed this, don't forget to like!

📍You can also connect with me on Twitter: 👋@sanskar_goyal11