Is JavaScript synchronous or asynchronous? What the hell is a promise?

We, the people, like structure. We like categories and descriptions and putting everything we know into tidy little boxes. This is why I found JavaScript so confusing at first. Is it a scripting or a programming language? Is it used on the front or back end?

The wonderful (read: awful) thing about JavaScript is that, most of the time, it’s a little bit of both. JavaScript has evolved so much over the years that it’s slippery to categorize. Today, I’m just going to dive into whether JavaScript is synchronous or asynchronous, and what workflow looks like under the hood.

JavaScript is Synchronous

Image by Ankit Kamboj

What if you have to make an expensive database request? You don’t want to be twiddling your thumbs while ol’ PG and Postgres grab those 800 songs you need for your music library. Synchronous code makes a programmer’s life very difficult, so the JavaScript community developed some great workarounds.

When you hear folks say that JavaScript is an asynchronous language, what they mean is that you can manipulate JavaScript to behave in an asynchronous way. It’s not baked in, but it’s possible! Here are a few ways to make that happen:

Asynchronous Callbacks

Let’s use a database request as an example: asynchronous callbacks allow you to invoke a callback function which sends a database request (and any other nested callbacks) off to your app, where it waits for the response from the database, freeing up the rest of your code to continue running.

Image by Ankit Kamboj

Once the database request completes, the results (and any other nested code) are sent to the queue, and then processed through the event loop.

In the diagram here, you can see how this differs from synchronous code. Function C, along with E, F and G are all sent off to the browser, queue and event loop.

If you want a wonderful, clear explanation of this process, check out this demonstration by Philip Roberts.

Now, this is a great solution, but it leaves a little something to be desired. Because you can’t predict exactly when function C will resolve, you have to nest all dependent functions within it. This gets messy fast, and leads to the infamous callback hell that no one wants to deal with. It was this environment that inspired the promise:

Promises

Image by Ankit Kamboj

With a promise, instead of bundling all dependencies into one code block and sending the entire thing off to the browser, we’re able to separate them out.

We can send the asynchronous callback (Function C) to the browser, and use .then() to hold all other dependencies (E, F and G) aside, running them only once Function C returns and runs.

This allows us to code in a more modular, readable way, while still gaining the benefits of asynchronous programming.

Async/Await

The async function declaration defines an asynchronous function, which returns an AsyncFunction object. An asynchronous function is a function which operates asynchronously via the event loop, using an implicit Promise to return its result. But the syntax and structure of your code using async functions is much more like using standard synchronous functions.

Example For Async Await:-

There are entire blog posts and (I’m sure) books written about Async/Await, so I’m not going to go into it in too much depth, but suffice it to say that Async/Await allows you to:

  • Continue using promises
  • Write asynchronous code that looks and feels synchronous
  • Cleans up your syntax and makes your code more human-readable

for more on javascript and React Js follow: https://medium.com/@ankitkamboj18

Software Developer

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