How JavaScript Code is Executed?

What is JavaScript?

JavaScript is a single-threaded, non-blocking, asynchronous, concurrent programming language with lots of flexibility.

It's confusing, right?

Let's understand word by word.

Synchronous JavaScript

JavaScript is a single threaded language, which means that the javascript engine can only run one statement at a time in a specific order. Although single threaded language simplifies the code writing. But if we want to perform a network call, then it will create a problem.

Suppose we want to do a network call and it is taking a time to fetch the data from the server. And, since javascript is a single thread language, this network call will block the main thread and the user will have a bad and frustrating experience. So, to solve this problem asynchronous javascript comes into the picture.

How does Synchronous JavaScript Works?

Before that, we will see execution context and callstack.

Execution Context: In simple words, an execution context is a container that contains two-component i.e. a memory component aka variable environment, and a code component aka thread of execution.

CallStack: Inside the execution context, a new execution context gets created for each and every function, and all these execution contexts together are called a callstack. When execution context one will be deleted after finishing the work. Only one execution context stays in the callstack at a time except the global execution context.

Let's start now:

var a = 2;
function sum(num) {
  var res = num + num;
  return res;
}

sum(a);

Along with ajs file, a global execution context gets created as shown in the above image. First, we will see how the memory component works.

All the variables and functions will be assigned as a key in the memory component except code inside the function. And the value will be undefined for variables and for functions, the copied function will be the value. undefined is nothing but a placeholder.

Now, we will see what happens in the second phase i.e.code execution phase.

After locating memory in the memory component, JavaScript will run the whole javascript program again line by line.

Execution summary:

• Line number 1: when it counters a variable it will replace the undefined by 2
• Line numbers 2, 3, and 4, nothing will happen because this is a function and functions work differently in JavaScript

• Line number 6: A new execution context will get created once the function will be invoked. And, the same process will be repeated in this new execution context

• When the return keyword encounter means, the function is done with the work and the result will be placed in the memory phase of the global execution context. And the execution context for the sum function will be deleted from the code component

Asynchronous JavaScript

An asynchronous javascript allows performing multiple things at the same time. Now, you must be thinking about how is that possible when it is a single threaded language.

To do this magic thing we would need Web APIs/APIs. Web APIs are part of the browser, not a javascript engine but the browser gives access of these APIs to the javaScript engine through the global object(window). Let's understand by code and diagram:

How does Asynchronous JavaScript Works?

We will see how the code is working behind the scene by using setTimeout and console.log Web API example. We have already learned that whenever a javascript file gets created, along with a global execution context also gets created.

console.log("start");

setTimeout(function callback() {
  console.log("callback");
}, 2000);

console.log("end");

Execution Summary:

• Line number 1: We are calling console API by console.log keyword. The output will be logged in the console container(developer tool) Line number 2: setTimeout keyword will call setTimeout API. It gives us timer features. In this example we want our output to be delayed by 2s. So, callback function will stay in the web API for 2s. And, since this callback is waiting, the javascript engine will jump into line number 7 and will execute it as same as line number 1
• After completion of 2s, the callback function will go to the callback queue and the event loop will help to send the callback function to callstack.
• After forwarding callback function to callstack, it will create an execution context and will get deleted after finishing the work

Note: I'll explain how all the Web APIS work in detail in the next blog.

Conclusion

Hopefully this article helped you learn about How JavaScript Code is Executed??. But, to make your understanding strong, write the code by yourself and use the debugger to check how your code works behind the scene. You can connect with me on LinkedIn and GitHub