DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for JavaScript Async/Await Promise All Array Destructuring
Dale L. Jefferson
Dale L. Jefferson

Posted on • Updated on • Originally published at dalejefferson.com

JavaScript Async/Await Promise All Array Destructuring

I think you will agree with me when I say working with asynchronous code is an important part of modern app development. Using new JavaScript syntax you can drastically improve the readability and performance of your code. In this article, I will show you how to use Promise.all() along with array destructuring.

Let's pretend you are building a book app and you want to fetch a book with its author and ratings.

Naive implementation

const getBook = async bookName => {
  const book = await fetchBook(bookName);

  const author = await fetchAuthor(book.authorId);
  const rating = await fetchRating(book.id);

  return {
    ...book,
    author,
    rating
  };
};

getBook("The Wealth of Nations");

Very clean looking code, but how does it perform?

  • fetchBook: 1 sec
  • fetchAuthor: 1 sec
  • fetchRating: 1 sec
  • Total: 3 sec

The bright people among you will have already noticed that fetchAuthor and fetchRating are independent and could be downloaded concurrently.

Promise all implementation

const getBook = async bookName => {
  const book = await fetchBook(bookName);

  return Promise.all([
    fetchAuthor(book.authorId),
    fetchRating(book.id)
  ]).then(results => ({
    ...book,
    author: results[0],
    rating: results[1]
  }));
};

Not so clean but now we are fetching the author and rating concurrently.

  • fetchBook: 1 sec
  • (fetchAuthor/fetchRating): 1 sec
  • Total: 2 sec

Best of both worlds

const getBook = async bookName => {
  const book = await fetchBook(bookName);

  const [author, rating] = await Promise.all([
    fetchAuthor(book.authorId),
    fetchRating(book.id)
  ]);

  return {
    ...book,
    author,
    rating
  };
};

Here we are using array destructuring with await, which in my opinion, vastly improves the readability of the code and we still have the performance improvement from using Promise.all.

Top comments (0)

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!