Published in


All you need to know about Async Await In JavaScript

How to work with the JavaScript Async Await keywords

JavaScript Introduces keywords “async” and “await” as an addition to EcmaScript 2015. In this article, we are going to talk about the following concepts. We are going to talk about the impact of each keyword on the JavaScript Execution.

Follow my YouTube Channel for more such content and tutorials…

Before getting in details of Async and Await, you should have a good understanding of Promises in JavaScript. Please refer to the following video for details:

Follow us on our YouTube Page:

Returning Promises with Async Keyword

When we append the keyword “async” to the function, this function returns the Promise by default on execution. Async keyword provides extra information to the user of the function:

Let's validate it with a small example.

The output from the above execution returns an already resolved promise.

In the above code, since the value returned is a promise, we can capture the promise and extract value from the same. We can associate a callback function with the promise using “then

Let's see the above code in action…

To in order to summarize the impact of the “Async” keyword, we can state:

Understanding Asynchronous Execution

Working with realtime scenarios, we might have some functions which return a promise on its execution. The promise returned from the function might resolve after some time, meanwhile, the main executing thread does not wait for the promise to be resolved, it proceeds further execution of the synchronous part of the application. Once the promise is resolved, its callback function is executed.

Let's look for the below code to understand the behavior.

The output for the above execution gives you the following output:

In the above code, we need to observe the following points:

Working with the “await” keyword

Adding “await” before a promise makes the execution thread to wait for asynchronous task/promise to resolve before proceeding further. When we are adding the “await” keyword, we are introducing synchronous behavior to the application. Even the promises will be executed synchronously. Lets’s update the code above to replicate synchronous behavior.

The output for the code above is:

In the above code, the following points need to be kept in mind:


Await and Async keyword combined together ensures that the main thread will not start executing further until the asynchronous part of the application has finished execution hence imparting synchronous behavior to the thread.

A note from JavaScript In Plain English

We have launched three new publications! Show some love for our new publications by following them: AI in Plain English, UX in Plain English, Python in Plain English — thank you and keep learning!

We are also always interested in helping to promote quality content. If you have an article that you would like to submit to any of our publications, send us an email at with your Medium username and we will get you added as a writer. Also let us know which publication/s you want to be added to.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mayank Gupta

9 Years of Experience with Front-end Technologies and MEAN Stack. Working on all Major UI Frameworks like React, Angular and Vue