Javascript is a synchronous, single-threaded language, and here everything happens inside an execution context.

Execution Context is like a big box which consists of two components -

1. Variable Environment ( or memory component):- Here all the variables and functions are stored in a key-value pair.
2. Thread of Execution ( or code component):- Here all code is executed one by one or you can say one line at a time or in a specific order i.e program will not execute another line of code (or another command) untill or unless the first command is executed and finished.

When you run a Javascript program an execution context is created. It is created in two phases. Let's take an example to have a detailed look inside the execution context and its phases.

let n = 2;
function sum(num){
    let sum = num + num;
    return sum;
}

let sum1 = sum(n);
let sum2 = sum(8);

When this program will run, a global execution context is created like this

This execution context is created in two phases. The first phase is known as the memory creation phase and the second phase is known as the code execution phase. Let's quickly take a look at the first phase with an example.

1. Memory Creation Phase:- In this phase javascript will allocate memory to all the variables and functions present in the program. When javascript allocates the memory to the variables, it stores a special value known as "undefined" inside that variable and for a function, it stores the entire function inside the name of the function. Basically in this phase Javascript will go through top to bottom and allocate memory for the variables and functions.
2. Code Execution Phase:- In this phase, once again javascript will run the whole program line by line to execute code. Let's see with an example.

As soon as it encounters the variable n in the first line, it stores the value on n which is 2 by replacing undefined. Now it'll move to another line. From line 2 - line 5, it won't do anything because there is nothing to execute, it is just a function.

In line 6, we invoke a function. In Javascript whenever a function is invoked a new execution context is created inside the global execution context. Inside this mini-execution context again similar things will happen which is at first javascript will allocate memory for the variables and functions and then the code execution process will happen. Here in this example, we are passing the value of n as an argument to the num as a parameter of the function. After that, the next line i.e it will do the calculation and store the value inside sum. At last, the return statement will return the value of sum.

Since the program is successfully completed its task by executing the function, the value of sum1 will be replaced by the value returned from the function, and the whole mini execution-context created at that specific instance will be deleted.

Now the program will go to line 7, which again invokes the sum function. Again a mini execution context will be created and the whole process will repeat. As soon as the value of sum is returned and replaces the value of sum2 that will be the end of the program. Now the global execution context will also be deleted.

For managing the whole process, Javascript uses execution stack. This stack is also known as calling stack. It follows LIFO (Last In First Out) structure. The global execution context is by default present in this calling stack. For our example, the calling stack will look something like this. When the program runs, it created a global execution context and pushed it into calling stack. In line 6, a function is invoked so a new mini execution context will be created and it will also be pushed into the calling stack and here it is named as 1st function called (refer to the above figure). As soon as this task is finished, the execution context will be deleted and the 1st function called will be popped out from the calling stack. This will repeat for the next line because a function is called here. When the programs end the global execution context is deleted from the calling stack.

Conclusion

So we have discussed how JavaScript programs are executed internally. While it’s not necessary that you learn all these concepts to be an awesome JavaScript developer, having a decent understanding of the above concepts will help you to understand other concepts such as Hoisting, Scope, and Closures more easily and deeply.

If you found this article helpful, please hit the like button and feel free to comment below! I’d be happy to talk 😃.

If you enjoyed the article and want updates about my new articles, please follow me here and on Twitter @dev_ram9047.