The road to becoming a JavaScript pro #1: Asynchronicity

Introduction

I have been feeling like my understanding of JavaScript has been shaky and so I have decided to write a series of blog posts to help me learn the concepts I have found tricky and solidify my knowledge.

I will be trying to avoid using language that makes it difficult to follow the article when paired with a concept that you don't fully understand yet. This is to make it as beginner friendly as possible. Think of this article as more of a starting point to learning more about asynchronicity.

I hope this is helpful to anyone who reads it but I'd also like to add that I am by no means an expert and so if there is anything incorrect, please correct me below 😊

Asynchronicity

In all programs, it is important to distinguish between what happens now and what happens later.

For example, if you have a website and you load a page of that website. A chunk of code from your program has been executed immediately to get that page to load and show what it needs to show. However, other chunks of code in your program have not been executed immediately as they could be waiting for events (e.g. a mouse click).

So, behaviour that is executed at the point in time in which the function is called synchronous behaviour.

Behaviour that is executed at a later point in time from when the function was called is asynchronous behaviour.

Another example of asynchronous behaviour is when you could be waiting for a response back after a event has occurred and a request has been made. For example:

• when requesting data from a database or file system
• when sending data across the network and waiting for a response

Why do you need to know about asynchronicity?

In JavaScript, chunks of code cannot be processed at the same time (i.e. in parallel). Everything happens one after the other. For this reason, Javascript is known as a single threaded language.

This is a problem for asynchronous actions as this will cause a program to stall and appear frozen whilst it's waiting for the asynchronous action to be fully performed.

Therefore, knowing about and accounting for asynchronous behaviour in your programs can help you make sure you are providing the best experiences for users of your program.

The event loop

To further understand asynchronicity, it is important to understand how the execution of chunks of code are handled in JavaScript.

As JavaScript is single threaded, it doesn't actually have any asynchronicity built into it. It performs functions in your program one at a time, at the moment in time when asked to by the event loop.

So what is the event loop exactly?

The event loop handles executing chunks of code in your program by invoking the JS engine. It is located in the hosting environment (e.g. a web browser) and you can think of it like a container storing a queue of actions to be performed by the JS engine. The actions at the top of queue get performed first and so on.

So, let's follow an example of the flow of what is happening in an asynchronous event.

Example asynchronous event: When sending data across the network and waiting for a response

1. Your JS program makes a fetch request for data to the server.
2. Whilst it's waiting for the response back, the JS engine tells the hosting environment to perform a callback function when the response is received.
3. When the hosting environment gets the response back from the server, it puts the callback function into the event loop to be performed.
4. When the callback function gets to the top of the queue in the event loop, the event loop passes it to the JS engine to be performed.

(Source: this flow was adapted from a description of the event loop by You Don't Know JS - found here)

Key takeaways

• Asynchronicity refers to events that happen later in time and is an important concept to be considering when writing programs (in any language!).
• The event loop determines the order in which the JS engine performs JS actions.

I think I will stop here for this article. The next article will deal more with how asynchronous events are handled in JS programs (e.g. callbacks, promises etc...).

Thanks for reading! 😁

Comments

[Greg Ogun]

This is super helpful! been holding off on learning about Async JS for the longest time 😅
Thanks for sharing your knowledge and giving such a clear explanation!

Looking forward to the next one 👏🏾

[Hibo Abdilaahi]

Thanks Greg! 😊 I totally feel you, async can be quite overwhelming for a beginner but I'm glad it was clear for you 🙌