Synchronous and Asynchronous in JavaScript

The simple meaning of synchronous is sequential. If processes or tasks are executed in the same order they appear first, they are said to be synchronous.

If any task or process is not executing in a sequential manner then this phenomenon is called asynchronous.

As we all know, JavaScript is a single-threaded language, but it is possible to achieve asynchronous behavior of the JavaScript language.

Synchronous example

console.log("hello program starts now");
 
function f1(){
    console.log(" I will run first");
}
 
function f2(){
    console.log(" I will run second");
}
function f3(){
    console.log(" I will run third");
}
 
f1();
f2();
f3();
 
console.log("program has ended now");

Output:

Synchronous and Asynchronous in JavaScript

Explanation

In the above file, we have three functions named f1, f2 and f3. We have defined the body of each function and called f1, then f2 and at last f3. The output is printed in the same order as the functions are called. This is the simplest example of synchronous JavaScript. If we call the function f2 before f1, the output will also be changed.

Example 2

console.log("hello program starts now");
 
function f1(){
    f2();
    console.log(" I will run first");
}
 
function f2(){
    f3();
    console.log(" I will run second");
}
function f3(){
    f4();
    console.log(" I will run third");
}
 
function f4(){
    console.log(" I will run fourth");
}
 
f1();
 
 
console.log("program has ended now");

Output:

Synchronous and Asynchronous in JavaScript

Explanation

  • For the above code, we have four functions named f1, f2, f3 and f4. We have defined their body, respectively and we called or invoked the function f1.
  • Now, if you see the body f1, you will notice that f1 is invoking f2 and, after that, printing some text.
  • So before printing, the text control goes to the body of f2, where we will be taken to f3, and from f3, we will go to the body of f4.
  • In f4, we have some statements to print, so we will print them and return back to f3.
  • Now, f3 will print its statement, and control will return to f2. f2 will print its statement, and control goes back to f1, and f1 will print also.
  • In the end, the program will end.

So this is also an example of synchronous JavaScript because at the call stack, whatever function is called on the top that will be executed first.

Synchronous and Asynchronous in JavaScript

Asynchronous JavaScript

In asynchronous JavaScript, any function or statement is called before but it will execute after sometimes. If a process needs some time to execute, then all other processes after that will be executed first.

Example

console.log("program started");
 
function f1(){
 
    setTimeout(()=>{
        f2();
    },1000);
 
    console.log(" this line is for function f1");
}
 
function f2(){
    console.log(" this line is for function f2");
}
 
f1();
 
console.log("program ended");

Output:

Synchronous and Asynchronous in JavaScript

Explanation

This program is an example of asynchronous JavaScript.

The first line contains some statement regarding starting of the program then it will be easily printed.

Now we have defined the body of function f1 and f2, and after this, we call it f1. And then, we print the statement about ending the program.

In the call stack, firstly, f1 will be pushed. Then if you see in the body of f1, we have a function setTimeOut which is called, and then a console.log() statement is written. The setTimeOut is an asynchronous function which takes two arguments.

  1. The first one is the callback function which will be executed after the time.
  2. The second argument is the time in milliseconds.

Since this is the asynchronous function, it will be removed from the call stack and moved to the node API section, where it will be there till its time. Now the f1 function print statement will be printed, and in the call stack, f1 will be removed. Now the statement of the program ended will also be printed.

After 2 seconds, the setTimeOut function’s callback function f2 will be put into the callback queue.

The callback queue is the palace where all the callback functions come after their execution and are ready to go into the call stack. Now call stack will pick one element at a time from the queue and execute it.

The coordination between the call stack and callback queue is maintained by the event loop. Now, f2 will be executed, and its print statement will be executed at the end. We can achieve asynchronous behavior by promises also.

Synchronous and Asynchronous in JavaScript