Learn Synchronous and Asynchronous Programming in Javascript

Introduction

Hello friends, in this article, we will discuss Synchronous and Asynchronous programming in JavaScript. I know most people would have already heard this term being used in JavaScript.

So just to give you some idea, synchronous is a blocking operation whereas asynchronous is a non-blocking operation, by which I mean in synchronous, another set of operations will be blocked until a particular operation is not completed, but in the case of asynchronous, none of the operations gets blocked. Now let us discuss this in more detail to better understand synchronous and asynchronous programming in JavaScript.

Table of contents

1. Synchronous Programming in JavaScript
2. Asynchronous Programming in JavaScript
3. Difference between Synchronous vs Asynchronous
4. Conclusion

Synchronous Programming in JavaScript

We all know that JavaScript is an interpreted language, and the code runs line by line. So by default, JavaScript code execution is synchronous, which means the code runs in a particular sequence one by one only after the completion of the program.

In synchronous programming, each statement or program we write in JavaScript is executed one after another, and the program will wait for each operation to be completed before moving on to the next statement.

Now let us understand synchronous programming in JavaScript with a few examples,

function first() {
    console.log(‘I am the first function’);
}
function second() {
    console.log('I am the second function');
    first();
}
second();

In the above example, we have declared two functions, that is first() and second(), and now we are calling the second() function, and this is the output that we receive.

Output

I am the second function
I am the first function

Now if we try to understand the order of execution here by seeing the output is sequential, I mean the output is performed in a particular sequence. It first calls the second() function and prints the output; after that, it calls the first() function and prints the output.

Let us now discuss what is asynchronous programming in JavaScript.

Asynchronous Programming in JavaScript?

So unlike synchronous, asynchronous allows code to run concurrently, so there is no blocking of the execution flow. In asynchronous programming, the tasks are executed in the background while the other tasks continue to execute other statements, so basically, when a task gets completed, a callback function is invoked, and it allows the program to handle the result or to continue with the next statement.

Now you must be wondering what is a callback function. Basically, callback functions are functions that are passed as an argument to a synchronous function. These functions are automatically invoked or executed whenever asynchronous operations are completed.

Let us understand this by an example,

setTimeout(function printMe() {
    console.log("Something is done.");
  }, 2000);

In the above example, we can see we have a setTimeout() function, and it takes a callback function named printMe. This callback function will be executed whenever the operation of setTimeout is completed, so for our case, it will execute after 2 seconds.

Now let us understand the asynchronous operation by a simple example,

console.log('1');
setTimeout(() => console.log('2'), 2000);
console.log('3');

Output

1
3
2

In the above code example, if we see the output of the code, we notice that after printing “1”, “3” is printed out in our console before “2” and this is because of the asynchronous execution of the code here in the code example the setTimeout() function waits for 2 seconds. Parallelly, the next statement gets executed without waiting for the previous statement to complete. This is why we say asynchronous is a nonblocking operation, as it does not block the main execution thread.

Difference between Synchronous vs Asynchronous

Now let us know the difference between synchronous and asynchronous programming.

Synchronous programming

Sequential Execution: In synchronous programming, the code is executed sequentially, which means one by one, so one statement must be completed before moving on to the next statement.

Blocking Nature: The synchronous operation blocks the main execution thread until they are completed.

Simple Control Flow: The synchronous code flows are predictable and straightforward, and it makes it easy to understand the execution order of a program.

Asynchronous programming

Concurrent Execution: In asynchronous programming, the code is executed concurrently even if the current code is running; other codes are allowed to run parallelly even without waiting for the current code to finish.

Non-Blocking Nature: Operations are nonblocking in nature as they don’t block the execution flow of the program. When a particular operation is started, the program can continue to execute other code or the statement, and a callback function, promise, or async/await syntax is required to handle the result or continuation of the operation.

Event-driven Model: Asynchronous programming most often relies on event-driven models, which means functions are invoked or triggered automatically in response to a particular event or whenever the asynchronous operations are completed, and this makes the model responsive

Conclusion

In this article, we have discussed synchronous and asynchronous programming and what are the differences between them, and we can conclude that synchronous programming and asynchronous programming both have their importance depending upon the situation or the task we are involved in if we want to strictly wait for a particular operation to happen and then we want to run a particular set of statement we can use synchronous programming and the place where we need to do multiple operations we must use asynchronous programming.

👋🏻 👋🏻 Hey if you are here, please connect with me
Instagram / Twitter / LinkedIn