Async JavaScript

JavaScript is a single threaded language.

That means that JS only does one thing at a time. This is key to understanding how it works.

JS has what's called an event loop. It is a one dimensional array of jobs to be done. When you execute a JS program it pops in an event to the queue, and executes it in First In First Out order. It does so sequentially and goes from the top of the program to the bottom. It will pop in whatever is at line 1 to the queue, then line 2, then line 3 and so on. It will execute those instructions in that order.

So writing this:

let a = 0;
let b = a + 10;

a = b; //a == 10 as expected.

It will (and has to in order for the program to work) execute from top to bottom. It will not declare the variable b until variable a is declared, and will not reassign variable a until b has been declared. This makes sense to us because we also think sequentially.

This is nice, but sometimes we want JavaScript to do something while we wait for something else. For example, if you set a timeout with the setTimeout function.

let a = 0;
let b

setTimeout(() => {
    b = a + 10
}, 0) //Setting a timeout of 0?

a = b; //here a == undefined??...

Now look at that example and think about it. Why does setting a timeout of 0 not do the thing that we expect it to do? If we set a timeout with no wait, we expect it to happen right away, why doesn't it??

There is a simple answer to this and it is in the event loop. Javascript does thing in the order of first in first out, remember?

When it comes time for actually executing the calls in the order this happens:

    declare "a" equal to 0
    declare "b" equal to undefined

    set a timeout of 0

    declare "a" equal to the value of "b" (which is undefined)

    check if timeout is done

    now that the timeout is done, add the anonymous function that was passed inside setTimeout to the queue.
    assign to "b" the value of "a" + 10

So if we look at the above, we see that setTimeout is not blocking the rest of the program to be added to the queue. Doing things asynchronously allow for larger timeouts to happen in the background without holding up the rest of the code from executing. If the timeout would have been longer, the output would have been no different. The timeout is waiting for the timer to be done to add the item to the bottom of the queue, but not before it adds the rest of the program to the queue.

Understanding the interworkings of JS like these allows you to write more deliberate code, and makes it so the way that you make programs are more readable and take advantage of the way that the language was designed to your favor. Without it, programming JavaScript is more like the tail wagging the dog.

Hope this helps you if you are having trouble understanding async code, stay tuned for more.