All you need to know about Async Await In JavaScript

Mayank Gupta
Feb 5, 2020 · 4 min read

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.

  1. Working With Async Keyword
  2. Impact of Await Keyword

Follow my YouTube Channel for more such content and tutorials…

https://youtu.be/2gjJZv7PD_U

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:

https://www.youtube.com/channel/UCo-h1M-5M6Y5D4Lgut8ge4w

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:

  1. The function contains some Asynchronous Execution
  2. The returned value will be the Resolved Value for the Promise.

Let's validate it with a small example.

https://gist.github.com/Mayankgupta688/5241ef7e17bbfb7c00d9bcef0e141f14

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

https://gist.github.com/Mayankgupta688/5d8217118e729da9205c0a92130f86a2

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

  1. Appending “async” will return a promise from a function
  2. In case the function is returning some value, the value will be available as the resolved value from the promise.
  3. If no value is returned, the resolved value will be “undefined”

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.

https://gist.github.com/Mayankgupta688/e0d4c9cc6ad3836cb512e804caa8f0ce

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

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

  1. Value “Mayank” is displayed before “Promise Executed”
  2. Promises are asynchronous and waiting on other thread for completion
  3. JavaScript does not wait for the promise to resolve, it executes further
  4. Once the promise is resolved the callback function is invoked.

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.

https://gist.github.com/Mayankgupta688/a21849d2af7f529d06cbad9e1665a530

The output for the code above is:

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

  1. “returnPromise()” returns a Promise which needs to wait at least for 3 seconds before getting resolved.
  2. We have updated the “await” keyword in front of the function call, which forces the promise to be resolved before the code is executed further
  3. After a delay of 3 seconds, the promise will be resolved and the further execution of the code will resume. It introduces synchronous behavior
  4. “async” keyword needs to be updated in front of functions that contain ”await” keyword to notify that the result might be available after a certain delay since we are explicitly making the main thread wait until the promise has been resolved.
  5. Await and Async has introduced synchronous behavior to the Execution.

Closure

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.

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 submissions@plainenglish.io 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.

TechnoFunnel

TechnoFunnel focus on learning and understanding the programming concepts

TechnoFunnel

We are focussed towards learning different technologies like React, Angular, Machine Learning, Python, Golang and AWS. Follow us for detailed conceptual understanding of these technologies and Interview Preparations.

Mayank Gupta

Written by

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

TechnoFunnel

We are focussed towards learning different technologies like React, Angular, Machine Learning, Python, Golang and AWS. Follow us for detailed conceptual understanding of these technologies and Interview Preparations.