🎉 Brief Overview of what you will learn in this article:
- Introduction to Web APIs like
setTimeoutand how they work
- Basics of Event Loop, Call Stack, and Callback Queue.
The word asynchronous generally refers to two or more events not happening at the same time. It means a task-A can be done while waiting for another task-B to be done. Let's me show you what that means by an example:
Suppose you go out to a burger king restaurant and ordered a cheeseburger but the restaurant was quite busy that day therefore the staff noted your order and told you that it will take some time to process your order and will notify you when it's done. Now you see a soft drink machine and purchased a coke while your burger order was still processing. This is a simple example of an asynchronous event in which while you were waiting for your order to process, you continued with another task of buying coke, instead of scheduling the task of buying coke after you got your burger.
Consider the code below:
const data = getDataAndWait(); // it could take any amount of time
Imagine if there is a function
getDataAndWait() which gets the data from a remote source and returns it. Here, the code after line 3 would not run until the
- We would like to be able to do a task that takes some time to complete, like fetching data from an API
- We would want to simultaneously execute the rest of the code line by line while waiting for a response from a long time taking task
- When that time-consuming task completes, we would want to be able to know that the task and its functionality are done.
console is another example of web API, 😲 surprising isn't it?
The web browser exposes the web API like
console which can be accessed from any global object.
Let's dive a little deep into the execution of the code line by line.
- When line 1 is executed since you know that
console.log()will use the
consoleAPI of the browser and log the string
startinto the console window.
- Now on line 3,
setTimeout()will use the timer feature and activate the time for 1000 milliseconds and register the
- Now control moves over the next line of code and logs
cbbecause after that 1000 ms timer expires, the
cbfunction needs to be executed, but that doesn't happen directly.
As soon as the timer expires, the function
cb is moved inside the Callback Queue which is a queue having code that is waiting to be pushed inside the Call Stack. But when is this function allowed to go in? Something that continuously loops and checks if the call stack is empty or not. If there's some code waiting to be executed in the Callback Queue, it quickly pushes it into the Call Stack and then the code is executed. That something is known as Event Loop
- Hence, the
cbis executed and it logs the word
helloon the browser console.
//This is the output of the code
Look like we have got what we wanted. The
cb function is executed after some time without blocking the execution of the rest of the code. But there are some drawbacks with this approach:
- The main task of
cbwas to log
hellointo the browser console window, but that is available in the callback function. This doesn't sound much of a problem because the example was very short. But in a real-world application, the asynchronous code often ends up with a callback inside another callback and so on. This is known as Callback Hell.
- Passing a function into another function might feel a bit odd just to execute it after some time.
👋 That all for this article, I don't want to bore you people so, in the next article, we will look at another solution to write asynchronous code through promises. If there's something you would like to talk about you can ask me in the comments or, you can directly reach out to me on Twitter @AyushCodes