JavaScript is a synchronous, single-threaded language, it means javascript can run only one command at a time and in a specific order. For a javascript code to be executed, we need something called a javascript engine, so what is this javascript engine A JavaScript engine is the component of a web browser that executes JavaScript code. Every Web browser has its own javascript engine e.g chrome has its v8 engine, Firefox has SpiderMonkey, Safari has Javascript Core Webkit, etc.

var name = "Ankit";

function displayMessage(name) {
  var message = "Hello " + name;
  return message;
}

var message1 = displayMessage(name);
var message2 = displayMessage("Rahul");

console.log(message1);
console.log(message2);

Take a look at the above code, we all know the working of the above code, we call the displayMessage function with an argument and it will return a message and later the message will be displayed in the console, but let's try to understand how JavaScript will execute this code.

Execution Context.

You might be thinking what the heck is Execution Context? let me tell you one thing everything in javascript happens inside the execution context. Execution context refers to an environment in which javascript code is executed. There are two types of Execution Context in javascript.

• Global Execution Context:- It is the default execution context When a script file is loaded in the javascript engine then the Global Execution Context is created.

• Function Execution Context:- Whenever a function is invoked in javascript a new function execution context is created.

Execution Context is created in two phases.

• Memory Creation Phase:- in this phase memory is allocated variables and functions.

• Code Execution Phase:- In this phase, the JavaScript engine starts executing the code from top to bottom. Variables and functions declared in the creation phase are now accessible and can be used to execute the code.

How code is Executed in JavaScript.

Now we know about the execution context, Take a look at the below code and try to understand how the code will be executed by javascript.

var name = "Ankit";

function displayMessage(name) {
  var message = "Hello " + name;
  return message;
}

var message1 = displayMessage(name);
var message2 = displayMessage("Rahul");

console.log(message1);
console.log(message2);

Phase1: Memory Creation Phase

When we run the above program, javascript will create a new execution context. In the memory-creation phase, it will start allocating memory to variables and functions. In the case of variables a special value undefined will be stored and for the function, the whole function code will be stored.

This is how the execution context will look in the memory creation phase.

Phase2: Code Execution Phase

In the code Execution phase, javascript will again go through the code line by line and start executing. So it starts executing and it encounters name="Ankit" now it replaces undefined with Ankit and moves to the next line. The next line is the function definition, a function is only executed when it is invoked, so nothing to execute here. Moving to the next line we have var message1 = displayMessage(name); a function is being invoked, so a new function execution context will be created. In this new execution context, there will be two phases. The first one of memory creation phase and the second is the code execution phase, In the memory execution phase memory will be allocated to variables and functions.

Notice that in the displayMessage function we have a name parameter, this parameter will also be treated as a variable. so in the memory creation phase, this is how our execution context looks.

Code Execution Phase

Again in the code execution phase undefined in name will be replaced with the argument passed and undefined in the message will be replaced by Hello Ankit. After that, it encounters return keyword, and when js encounters return message it moves the control back to the place where the function was invoked with the returned value. In our case, the control will move back to message the variable and this function execution contested will be deleted, and undefined in the message1 will be replaced by the returned value.

Representing Deletion of the function execution context.

Now our control will move to the next line i.e message2 here also displayMessage function is being invoked so the same process will be repeated again, and a new function execution context will be created, and the memory creation phase and code execution phase will be repeated.

Memory Creation Phase

Code Execution Phase

After the code execution phase, the control is moved to the message2 execution context is also deleted. undefined in message2 is replaced by returned value. After that js encounters console.log statements and it displays both messages to the console.

Once the whole program is executed the global execution context is also deleted.

Call Stack

As you might have noticed that there are lots of execution contexts need to be created and deleted, so to keep track of execution contexts javascript uses Call Stack. It operates on the Last In First Out (LIFO) principle, meaning that the last function called is the first one to be executed. When Ever a new execution context is created it is pushed into the call stack and when the execution context is deleted it's popped out of the stack. It also maintains the order of execution contexts. It is also known as an 'Execution Context Stack', 'Runtime Stack', or 'Machine Stack'.

Conclusion 🙋‍♀️🙋‍♂️

Thanks for taking the time to read this tutorial. I hope you found it helpful and informative. Please share it with your friends and followers on social media if you enjoyed reading it.