Introduction

Synchronous means existing or occurring at the same time. While asynchronous means not existing or occurring at the same time. In this article, I will talk about the difference between synchronous and asynchronous.

Javascript is a single-threaded language that can be non-blocking. It means it has only one call stack and one memory heap and

Synchronous

When you execute something synchronously, you will wait for one task to finish before moving on to another task

console.log("1");
console.log("2");
console.log("3");

Let's say the task assigned is to console.log are numbers the first number to be logged is 1 then 2 before 3. The number 3cannot be logged if 2 has not been executed. For example

Imagine 3 school students instructed to run a relay race on a road. 1st student runs her given distance, stops and passes the baton to the 2nd. No one else has started to run.

1------>
      2.
                3.

When the 2nd student retrieves the baton, she starts to run her given distance.

  1.
    2------>
            3.

The 2nd student got her shoelace untied. Now she has stopped and tied up again. Because of this, 2nd's end time has got extended and the 3rd's starting time has got delayed.

  1.
    --2.--->
            3.

This pattern continues on till the 3rd retrieves the baton from 2nd and finishes the race.

OR, You are in a queue to get a movie ticket. You cannot get the ticket until everyone in front of you gets one, and the same thing applies to the people queued behind you.

OR, When you call your teacher with a question you wait for the teacher to pick up before you ask your question.

That's exactly how Synchronous Javascript is. When you assign a task you wait for it to finish before moving on to another task. If our example was a really, really big task that we were doing maybe a loop that has millions of item through an array

console.log("1");
console.log("2");
console.log("3");

//OUTPUT
   //1
  //2 PENDING.........
  //3

well if the second line was a really massive job that means the first line will get executed then the second line which is a really massive job will just work there and the third line will wait for the second line is executed and will take a really long time before the third line gets executed. If we had that on a website the user wouldn't be able to do anything the website would pretty, much freeze until that task is done and the user would just wait there.

Asynchronous

When you execute something asynchronously, You can move to another task before it finishes.

console.log("1");
setTimeout(() => {
  console.log("2")
},2000)
console.log("3");

//OUTPUT
  //1
  //3
  //2

Let's say the task assigned is to console log numbers the first line gets executed then the third line gets executed before the second. You might be asking "Whoa, what just happened? we have 1 logged then 3 and then 2 two seconds later"

Line 2 went through the call stack then communicated with the web Api's before going into the callback queue and next to the event loop and back finally it gets logged.

For example

Just Imagine 10 random people walking on the same road. They're not on a queue, of course, just randomly walking on different places on the road in different paces.

2nd person's shoelace got untied. She stopped to get it tied up again. But nobody is waiting for her to get it tied up. Everyone else is still walking the same way they did before, in that same pace of theirs.

10-->    9-->
   8--> 7-->   6-->
 5-->     4-->
1-->   2.    3-->

OR, you go to a restaurant with many other people. You order your food other people can order their food, they don't have to wait for your food to be cooked and served before they can order. In the kitchen restaurant, workers are continuously cooking, serving and taking orders. People will get their food served as soon as it is cooked.

OR even when you send a text message to a teacher with questions and then the teacher, he or she has the time will respond to you with the answer.

That's just how asynchronous Javascript works. You can leave it a message and a callback tells you "Hey! Mr. teacher has a message for you when you are not busy".

On our example, if line 2 was a really really big task maybe a loop with millions of arrays well I guess you're to know what's gonna happen. Line 1 gets executed while line 2 is working the line 3 gets executed and does not wait till the second line is done.

Conclusion

Now I think you know the difference between asynchronous and synchronous javascript I am really sure you understand that Synchronous execution means the execution happens in a single series. A->B->C->D. If you are calling those routines, A will run, then finish, then B will start, then finish, then C will start, etc. With Asynchronous execution, you begin a routine, and let it run in the background while you start your next, then at some point, say "wait for this to finish". It's more like:

Start A->B->C->D->Wait for A to finish

The advantage is that you can execute B, C, and or D while A is still running (in the background, on a separate thread), so you can take better advantage of your resources and have fewer "hangs" or "waits".