Beginner level guide to Asynchronous JavaScript with Async and Await.

Let us understand the difference between Synchronous and Asynchronous with a simple example before we start with Async/Await.

When we go to a restaurant a waiter will be allocated to us, he will take our order and inform the chef inside to prepare our dish, meanwhile when the chef is preparing our dish instead of waiting for him the waiter will go to next table and take order from them, in this way the second table need not wait for a long time to give their order. This method is called Asynchronous or Non-Blocking architecture. Here the waiter is like a thread allocated to handle requests. So a single thread is used to handle multiple requests.

In the case of Synchronous or Blocking architecture after taking an order from one table, the waiter will sit in the kitchen doing nothing waiting for the chef to finish preparing the dish and after serving the dish the waiter will go to the next table and take their order. In this method, a lot of time will be wasted.

when a program is being executed synchronously, the thread will wait until the first statement is finished to jump to the second one, while in asynchronous execution, even if the first one was not completed, the execution will continue.

Photo by Shahadat Rahman on Unsplash

In this article, we are going to learn about Async/Await in JavaScript.

But before we start with Async/Await, we need to understand few concepts like:

1. Event loops

2. Callbacks

3. Promises

Event loop in javascript:

JavaScript is a single-threaded programming language which means that only one task can run at a time, by using a few smart data structures in JavaScript gives us the illusion of multi-threading. It has a call stack and all the code is executed inside this call stack.

The call stack is responsible for keeping track of all the operations in line to be executed. Whenever a function is finished, it is popped from the stack.

The event queue is responsible for sending new functions to the track for processing. It follows the queue data structure to maintain the correct sequence in which all operations should be sent for execution.

Call Back in Javascript:

Functions are an object type. So like any other object type, functions can be passed to other functions. Callback functions are those functions that have been passed to another function as an argument.

This callback function can be invoked inside the function calling it at any point

Since JavaScript is an event-driven language, we can’t just call one function after another and hope both of the functions will execute in the same order.

Instead of waiting for a response, JavaScript keeps on executing. This is where callbacks prove to be really beneficial since they can be called from inside the called function to return some kind of useful data.

The problem with callbacks is it creates something called “Callback Hell.” Basically, you start nesting functions within functions within functions, and it starts to get really hard to read the code

Promise on JavaScript:

Callbacks were limited in terms of functionality and often led to confusing code, so, ​promises were introduced to resolve these problems. A promise is a value that may produce value in the future. That value can either be resolved or unresolved

Promises basically has 3 states namely pending, fulfilled, and rejected. Promise takes two parameters, resolve and reject.

For example, when we request data from the server by using a Promise, it will be in pending mode until we receive our data.

If we achieve to get the information from the server, the Promise will be resolved successfully. But if we don’t get the information, then the Promise will be in the rejected state.

Finally, let us talk about Async/Await in Javascript:

Async means asynchronous. It allows a program to run a function without freezing the entire program. This is done using the Async/Await keyword. The keyword ‘async’ before a function makes the function return a promise, always.

‘await’ is used to wait for a promise to resolve or reject, and can only be used inside an asynchronous function.

Promises were introduced to solve the famous callback hell problem, but they introduced complexity on their own, and syntax complexity. That is when ‘async functions’ were introduced. They make the code look like it’s synchronous, but it’s asynchronous and non-blocking behind the scenes.

Async functions are basically a combination of promises and generators, and they are a higher level abstraction over promises.

An async function returns a promise, In simple words, we can say that async/await is built on promises like in this example:

When you want to call this function you prepend ‘await’, and the calling code will stop until the promise is resolved or rejected. Note: the client function must be defined as ‘async’. Here's an example:

Below is a simple example of async/await used to run a function asynchronously:

Output

As you can see in the example above, our code looks very simple. Compare to code using plain promises, chaining, and callback functions.

Now you know all the basics of Event Loops, Callbacks, Promises, and Async/Await. These concepts have made reading and writing JavaScript code much easier and more effective.

Happy Learning ☺️

Thank you.