Asynchronous JavaScript explained in human language

Async..WHAT JavaScript ??

An Async (short for Asynchronous) JavaScript allows us to run callback functions without actually blocking the execution block, which helps us to run the functions in pararrel to one another.

You know what ? Even I didnt understand a word of what an Async JS meant when I first heard of it - it took me a while to understand what it actually means. So here I won't be going that deep, but I will be explaining just the simple meaning of this while 'Asynckkyy' process. I have divided this article into 2 parts - Part 1 where I explain in language which humans can understand and Part 2 where you become a super human to understand more about it

PART 1: HUMAN LANGUAGE

RS Hotel is an amazing hotel that makes some of the best food in the city. But RS hotel has 2 branches: A branch named 'RS Hotel Sync' and another one named 'RS Hotel Async'. Lets first see how things are working in the first branch :

Sync Branch -

So what's happening in this branch ?

• There are 4 people (A,B,C,D) waiting in line to order food at the kitchen counter.But there is a speciality at this branch - after you place an order you have to wait at the kitchen counter until the food has completed cooking.
• So here if A places an order, A has to wait there until the food is cooked and delivered to him right there at the kitchen counter.
• A leaves the counter after grabbing his food, now B comes up next a little frustrated because he had to wait for a long time, places his order and waits for the food to get cooked.
• Similarly for C and D the same happens.

Async Branch -

So what's happening in this branch ?

• At first, A place his order and while his food is being cooked, A is informed that he can go to the waiting area.
• This clears up the kitchen counter so next up, B place his order, and right then you see a man behind the kitchen counter shouting "Hey A your food is ready, please come get it before it gets cold !!". A comes, grabs his food and leaves. B's food starts getting prepared and on seeing this B leave towards the waiting area.
• Next up is C, C orders, right then the man shouts for B to come and grabs his food and leave, C's food starts getting prepared and C leaves.
• similarly for D the same happens.

Conclusion for PART 1:

• Notice in 'Sync' branch how people had to queue up for a long period of time for the food to actually finsish cooking ? This is called the Synchronous way. At a time only one dish can be prepared. This is actually ineffective as other people ( B, C, D) had to actually wait.

• Meanwhile, in 'Async' branch, things are going as smooth as butter. People are placing orders, food is getting prepared and when the next person comes to order, the earlier person's food has finished cooking. Also, people are told to wait in a waiting room after ordering so there is literally no queue.This is actually an efficient way to handle mutliple number of processes because the people behind one other don't have to wait for a long time in a queue and also the cooking is being done at the same time behind the scenes.

PART 2: SUPER HUMAN LANGUAGE (ASYNC EXPLAINED A BIT DEEP)

This is where things starts to get a little interesting. Now since you have understood what Async basically is, lets actually see what is really happening asynchronously in an app with the help of my beautiful crafted 'figm-orial representation' - that I so call.

Explanation

Whats happening is similar to the PART 1 explanation, but just that you can see an additional item here - the 'Cooks'. Now the cooks inside the kitchen are really the ones who does all the hardwork okay!

So what happens here ? Suppose A orders the food, the order is taken by the kitchen and A's order is allocated to 'Cook 1' (the red arrow's gives you a much clear idea). As soon as A's food is done, 'Cook 1' returns this food to the kitchen and back to A. And in Async the orders are taken so fast that each order should be allocated to separate cooks.
So as soon as A's order is taken, A's food is allocated to 'Cook 1', next up B's order is taken, allocated to 'Cook 2', C's - 'Cook 3', D - 'Cook 4'. As soon as each cook is done, the food is returned to the kitchen where each customer can take the food. See no hassle - feels pretty organised to me.

---

Similarly

This is actually what happens in JavaScript. Just replace:

• the 'Customers' with 'Tasks' - These tasks are usually functions inside an app(e.g a Node.js app) with a callback function (explained below)
• replace the 'Kitchen' with the 'Event loop'- which takes in all the tasks and allocate it to 'threads'
• replace 'cooks' with 'threads' - which handles and processes each task and returns back the completed version to the 'Event loop' which then returns back to the 'Node.js app'.

Someone explain to me what a callback function is !!!

Now a callback function is basically what I like to call it as a 'Boomerang function'. Know what a Boomerang is ? That curvy little thing that you flip in the air and it just returns back to you. Yup, callback functions can be thought like boomerangs who takes certain orders and then returns back the result after processing them.

But where is this 'Async' even used ?

Now, do note in your mind that, the word 'Async' just doesn't only have one meaning that is 'Async functions'. E.g Node.js is a server side framework which actually runs on the basis of these 'Async' operations. And guess what? That is why Node.js is such a popular framework (my favourite too !) because it can handle as many processes as it wants as it won't get blocked because the processes are run Asynchronously.This means less server overhead and faster processes. Now statements like this might make at least 40% sense to you now.

What are some things that you should know while using 'Async functions' ?

First things first, every good thing in this world also has to have some bad sides to it right ? One thing you should be doing is handling errors well. Because if you don't do that well there is a chance that your app might crash. Let the fast processing be the motivation behind handling errors.

Time to say bye

So, I hope you have got some idea of what Async is. I have tried to explain this as simple as possible keeping in mind you are an absolute beginner. But its fine if you don't understand it in your first read, because there will be a time when you finally understand it and feel like this:

Meanwhile, Here is one amazing video which will help you understand it better:

https://www.youtube.com/watch?v=8aGhZQkoFbQ&vl=en&ab_channel=JSConf

Oh and I am Ridhik and nice to meet ya. I am learning how to code better everyday, build and write about them. Currently I am learning React.js and Node.js. Please let me know if there are any errors or corrections to be made.Also, Feel free to Connect with me on Twitter.