What is asynchronous JavaScript?
Tags: beginners, javascript, codenewbie
Published: 2021-12-22 00:56:18

##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:
```javascript
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:
```javascript
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:
![Diagram of asynchronous JavaScript flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w092kmxdwgds5g6t7teh.png)
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:
```javascript
console.log(1);
setTimeout(()=>console.log(2), 3000);
console.log(3);
```
This will give us the following:
```javascript
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:
![Asynchronous JavaScript flow in detail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2jdn2a4xghaz8fix86u.png)

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](https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf) by [Alexander Zlatkov](https://medium.com/@zlatkov).