Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at JavaScript async programming.

Async Programming

Async programming is an import part of JavaScript apps.

It’s different from the alternative mode, which is synchronous programming.

Synchronous programming is where we run code line by line.

And async programming is where we run some code, then wait for the result.

While we wait for the result, we let other pieces of code in the queue run.

Then once the result is obtained, then we run the code that’s waiting for the result.

This is different in that we aren’t running anything line by line.

We queued up the code and initialize them.

Then once the result is computed, we go back to run the code that’s initialized.

When the code is waiting, the latency isn’t predictable.

So we can’t just run code and then wait for the result without letting other pieces of code run.

JavaScript Call Stack

The call stack is a record of the functions that are called from latest to earliest.

For instance, if we have:

function c(val) {
  console.log(new Error().stack);
}

function b(val) {
  c(val);
}

function a(val) {
  b(val);
}
a(1);

Then we get:

Error
    at c ((index):37)
    at b ((index):41)
    at a ((index):45)
    at (index):47

from the console log.

We see that a is called first, then b , then c .

When c returns, the top of the stack is popped out.

And then b is popped out when it returns.

And finally a is popped.

Event Loop

A browser tab runs in a single thread.

It runs in the event loop.

The loop continuously picks messages from the message queue and runs callbacks associated with them.

The event loop keeps picking tasks from the message queues when other processes add tasks to the message queue.

Processes like timers and event handlers run in parallel and add tasks to the queue.

Timers

The setTimeout function creates a timer and wait until it fires.

When the timer is run, a task is added to the message queue.

It takes a callback and the duration in milliseconds.

Once the duration is reached, then the callback is run.

When the callback is run, then other interactions in the browser is blocked.

Callbacks

Node popularized its own style of callback.

The callback takes an err and data parameter.

err has the error object.

data has the result data.

For instance, we have:

fs.readFile('/foo.txt', (err, data) => {
  if (err) throw err;
  console.log(data);
});

which has a callback with err and data .

The fs.readFile reads a file asynchronously and gets the content.

Conclusion

JavaScript needs lots of async code because it only runs on one thread.

It needs to queue tasks and then run asynchronously.

This way, it won’t hold up the main thread.