JavaScirpt Tutorial Index

JavaScript Tutorial Javascript Example Javascript comment Javascript Variable Javascript Data Types Javascript Operators Javascript If Else Javascript Switch Statement Javascript loop JavaScript Function Javascript Object JavaScript Arrays Javascript String Javascript Date Javascript Math Javascript Number Javascript Dialog Box Javascript Window Object Javascript Document Object Javascript Event Javascript Cookies Javascript getElementByID Javascript Forms Validation Javascript Email Validation Javascript Password Validation Javascript Re-Password Validation Javascript Page Redirect Javascript Print

Misc

JavaScript P5.js JavaScript Minify JavaScript redirect URL with parameters Javascript Redirect Button JavaScript Ternary Operator JavaScript radio button checked value JavaScript moment date difference Javascript input maxlength JavaScript focus on input Javascript Find Object In Array JavaScript dropdown onchange JavaScript Console log Multiple variables JavaScript Time Picker Demo JavaScript Image resize before upload Functional Programming in JavaScript JavaScript SetTimeout() JavaScript SetInterval() Callback and Callback Hell in JavaScript Array to String in JavaScript Synchronous and Asynchronous in JavaScript Compare two Arrays in JavaScript Encapsulation in JavaScript File Type Validation while Uploading Using JavaScript or jquery Convert ASCII Code to Character in JavaScript Count Character in string in JavaScript Get First Element of Array in JavaScript How to convert array to set in JavaScript How to get current date and time in JavaScript How to Remove Special Characters from a String in JavaScript Number Validation in JavaScript Remove Substring from String in JavaScript

Interview Questions

JavaScript Interview Questions

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