What is asynchronous JavaScript?

First understand synchronous JavaScript

This means that you do one thing at a time. This is JavaScript in its natural state. Not all languages are like this. Consider the following code:

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

When this is run, 1, 2, and 3 will appear in order in the console, like this:

1
2
3

We start with the first line, when it is finished we move to the second line, and so on.

This works fine for simple projects, but if you want to build any kind of actually functioning web app, you'll need to start making server requests. The problem is, we don't really know when the server is going to respond with the information we need. With synchronous JavaScript, that creates a problem – waiting.

Remember, we can't move on to the next task until the present task is complete. That creates a very unpleasant and clunky user experience. What can be done to solve this?

Enter asynchronous JavaScript

Asynchronous JavaScript allows us to move on to the next task while we wait for an answer (i.e. a "callback") from the server. It's a bit of a misnomer because JavaScript itself isn't what's asynchronous, it's other mechanisms that JavaScript can interact with that enable that capability.

Let's consider the diagram below:

JavaScript runs in the browser, which also takes care of storing information(Memory Heap) and the order in which tasks are completed(Call Stack). The Web APIs, Callback Queue, and Event Loop you see are what makes asynchronous code work.

Example

Let's change our code from the beginning just a little:

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

This will give us the following:

1
3
2

I was surprised when I learned that setTimeout() is not actually JavaScript, it's an API! It allows you to wait three seconds (in this case) before calling console.log(2) (simulating a server request). Meanwhile, the browser is free to move on to the next line. That is why '3' appears before '2'. This is asynchronous JavaScript in action.

Going a little deeper

Here is how the above is actually broken down according to our diagram. Start with the number 1 and follow all the way to 7:

1. The browser reads the first line of code. It understands that this can be done right away.
2. It moves the function to the call stack. No other functions are necessary for this one to run so
3. It is popped off the call stack, executed, and the result appears in the console.
4. The browser reads the second line of code. It understands it will have to wait for the result so it hands the task off to players behind the scenes and moves on.
5. The browser reads the third line of code. It understands that this can be done right away.
6. Repeat step 2.
7. Repeat step 3.

While steps 5-7 were happening, the setTimeout() function was handed off to the Callback Queue and the Event Loop began checking the Call Stack to see if it was empty. When it was, the setTimeout() function was moved to the Call Stack and executed as normal. So, we were able to do more than one thing at a time. This is asynchronous JavaScript.

Delve even deeper in this article by Alexander Zlatkov.