If you are a beginner, then I bet that you must be confused whenever you encountered the term Synchronous or Asynchronous. What the hell is this? Is our JavaScript Synchronous or Asynchronous ? Don't worry, we'll see all our doubts here and after reading this blog, you must understand about these two terms. So let's dive in deep :
What is Synchronous and Asynchronous meaning ?
Javascript is the synchronous, single-threaded language which means it executes the task one by one at a time.
Let's understand it very basic example.
I am giving you a task to prepare breakfast for me. I want boiled egg, bread toast and fruit juice. And it's my daily routine.
You just visit my kitchen and start boiling the egg. Once it is done, now you start toasting the bread. After some time, this task is also completed.
Now you just need to make juice for me. That's it and Thanks for it. You finally prepared the breakfast for me. But you have made a little mistake here. You took a long time to prepare breakfast for me.
Now, what's the problem here, and how making breakfast is related to synchronous?.
You have done one task at a time and wait for it until it is completed. As soon as the first task is completed, then you started working on second task. Similarly, if the second task is completed, you started working on the third task, and so on.
So here, you are dependent on each other. This is known as Synchronous. And our JavaScript relates to this.
Can you make breakfast once again for me? But this time please do multiple tasks at a time so that other tasks keep working in the background and takes less time.
Now again you start preparing the breakfast. As soon as you keep the boiled egg on gas, you also start toasting the bread and at the same time, making juice.
You are doing 3 task at a time. You have made breakfast in Asynchronous way.
So which way you love to prepare breakfast? Synchronous or Asynchronous?
Obviously, the Asynchronous way because you can make multiple request in background.
Hope, you understand these two terms. Now let's understand it with JavaScript :
Please have a look at the below code :
// Synchronus Way
console.log("Task:1 Boiled Egg");
console.log("Task:2 Toast the Bread");
console.log("Task:3 Fresh Juice");
There is nothing special with the above code as it executes the one line at a time from top to bottom. Suppose if request 2 Task:2 Toast the Bread is failed due to some cause. Then,will it print the third request Task:3 Fresh Juice ??
No, its stops executing the next block of code because Synchronous code blocks the code.
In a nutshell, these requests are dependent on each other.
Now covert the same code in Asynchronous way. Let's see :
// Synchronus Code
console.log("Task:1 Boiled Egg")
// Asynchronus Code
setTimeout(function(){
console.log("Task:2 Toast the Bread");
},3000)
// Synchronus Code
console.log("Task:3 Fresh Juice");
We have used setTimeout here, it means we want to execute this block of code after some time. We have given 3000ms which is equals to 3 Seconds
Now, please let me know one thing, will it print the same way as we print it earlier ?
Means in this way ?
console.log("Task:1 Boiled Egg");
console.log("Task:2 Toast the Bread");
console.log("Task:3 Fresh Juice");
// Task:1 Boiled Egg
// Task:2 Toast the Bread
// Task:3 Fresh Juice
No, it'll print this way :
console.log("Task:1 Boiled Egg")
setTimeout(function(){
console.log("Task:2 Toast the Bread");
},4000)
console.log("Task:3 Fresh Juice");
// Task:1 Boiled Egg
// Task:3 Fresh Juice
// Task:2 Toast the Bread
Why it is printing Task:2 Toast the Bread at the end ? This is because this request taking time.
So the request second is taking time, then our JavaScript code moves to execute the next block of code. This is how Asynchronous works.
Asynchronous means it never block background code.User can perform the other task too.