Should you Await or Promise in JavaScript ?

By StartxLabs
Date 18-04-20
Should you Await or Promise in JavaScript ?
" Should you Await or Promise in JavaScript?"

Async function and await keyword got introduced with ES7 that is a improved form of promises which makes it easier for developers to work with promises by avoiding a messy code. Async/Await is a syntactic sugar on promises that makes the code more readable and easy to understand.

Though Promises are one of the JS fundamental I personally and many of us love to work with.

 

Promises???

Promises are used to handle asynchronous operation in JavaScript. They are used to deal with multiple asynchronous operations.

Pic Source: GIPHY

After reading about Promises you must be thinking the same way for Async/Await as this guy!!!

 

Let me clear this in start itself, at the base or core Async/Await uses promises. It is just more modified way of using Promises and handling asynchronous callbacks.

 

Let’s see what Async/Await are and how they simplify code.

 

Async:

async keyword is placed before a function that makes it an async function. An async function will ensures that result of the function either returns a promise or wrapped inside a promise.

In simple words async function always return a promise.

Fun Fact:- Every function that returns a promise is called an async function(Not so funny though).

 

Async function allows us to write asynchronous code in a synchronous manner via the event-loop. It allows developers to handle the scripts asynchrounously by writing a cleaner and readable code.

Although the code looks like a synchronous code but it works asynchronously this must be kept in mind while designing the flow of code otherwise it will cause a major problem in debugging.

 

Await:

The keyword await is used for a promise and can be used only inside an async function, if used inside a regular function it will cause a syntax error.

Await makes JavaScript wait until that promise gets resolved. A function will not execute further and pauses when await is called until the promise resolved or throw an exception in case of rejection.

Let's see an example of a function execution using await.

 

In above function result will appear after the time span of 2 second because promise will take 2 seconds to get resolved therefore scripts will proceed further once the promise will resolve.

 

Best part: 

That doesn’t cost any extra memory space, because the engine can handle other events and functions while promise resolves.

This is more elegant way of getting a promise result than promise.then.

 

 

Limitation of Await

  • It will work only in async function.
  • Await doesn’t work in top level code but it can be wrap inside an anonymous async function.

 

Now as we are pretty familiar with async/await let see where we actually need them, where code is actually getting messy.

Yesssss!! You guessed it right it all started with callbacks.

Pic Source: GIPHY

 

In Chaining when we require to execute multiple callbacks then async/await looks like a saviour for many of us (atleast for me).

 

Lets get started with chaining.

In case of executing numerous of asynchronous tasks to be done from each other. Likewise in returning Promises from an API, it will be resulted in promise chain and functions have to be spilt into parts in order to handle it.

 

The chain will further continue depending on number of functions. While in async function execution it will be executed in a single function that is a lot more easier to handle.

 

Promises or Async/Await (Decision Time)

Both Promise chain and Async/Await are build on promises, major difference between the two is of readability. Async/Await make code a lot more readable, easier to handle that too without costing any extra space in memory. While promise chain will allow you to quickly grab a promise and also avoiding writing a useless wrapper functions.

 

"We transform your idea into reality, reach out to us to discuss it.

or wanna join our cool team email us at [email protected] or see careers at startxlabs"

subscribe to startxlabs

startxlabs