Synchronous vs Asynchronous

Synchronous execution is plain and straightforward. Let’s say you have three lines of code, Lines 1, 2, and 3. Line 2 gets executed only after Line 1 has finished execution. Line 3 after Line 2, and so on.

1console.log("Hi"); // line 1
2console.log("I am"); // line 2
3console.log("John"); // line 3

Async (which literally means "out of sync") happens differently. Let us take the same example of having three lines of code, but Line 2 takes more time to execute. In the asynchronous case, do Lines 1 and 3 wait for it to complete? No, they don’t. Lines 1 and 3 finish execution and the result of Line 2 is returned later, when available.

This can be easily exhibited using the setTimeout() method in JavaScript. This is often used to demonstrate synchronous and asynchronous code execution. Don’t worry if you don’t understand the syntax, we will explain it step by step.

Lines 1 and 3 have a simple console.log() statement. The setTimeout() function takes a callback as an argument and the next parameter that you see is the delay in milliseconds. Once the delay is completed, the callback (which is a function) is executed.

xxxxxxxxxx

console.log("Hi");

setTimeout(() => {

    console.log("I am");

}, 2000)

console.log("John");

Promises

You now know what callback hell is and what it looks like. But how do you solve it? For that, we have promises in JavaScript. They were introduced in ES6 and can be a confusing topic for many. Let’s try and understand the syntax for Promises, how its internals work, and how we can use them to solve callback hell.

A promise object has two attributes, a status, and a value. As you can see above, when we create a new Promise, the status is pending and the value is undefined.

The status can take one of three values; fulfilled, rejected, and pending. As their names suggest:

1. fulfilled is when the promise has been resolved
2. rejected is when it gets rejected, and..
3. pending is when it has been neither resolved nor rejected.

In an actual scenario, we pass in two callbacks to the Promise constructor, known as resolve (or res) and reject (or rej). These two methods are used when the promise needs to be resolved or rejected. The argument passed to the resolve method is the value associated with it and the argument for the rejected method is the value associated with it.

xxxxxxxxxx

function hello(){

    return new Promise((resolve, reject) => {

        // resolve() or reject()

    });

}

The output of this next bit of code will be Promise { ‘Hello’ }. Even though we are returning a string it is wrapped in a promise. How do we access this data from the promise?

There are three methods that are attached to a promise, they are .then(), .catch() and .finally(). They are used to access the data from the promise. The first method is called after a promise is resolved, the second one is called if a promise is rejected and the last one always gets called (used for closing connections, clean-up, etc). Let’s wrap all of this into a nice little example.

1hello().then(value => console.log(value));

This will give the output as Hello. In the same way, if we encounter an error, the output can be retrieved by using the .catch() method.

xxxxxxxxxx

function hello(){

    return new Promise((resolve, reject) => {

        try{

            resolve("Hello")

        }

        catch(error){

            reject("Boo! You have a " + error)

        }

    });

}

console.log(hello());

Async/Await

For management of asynchronous operations, we have Promises-- so everything should be good, right?

There must be a better way to write Promises from what we saw above. The syntax still requires reasoning about multiple states of resolution, and requires effort to understand if there are many Promises being generated. Is there something better?

That is where async/await comes in. This is a special syntax (really just a nicer interface to Promises) that allows us to handle them in a much easier manner. To use async, you simply need to prefix the keyword before any function and it will return a promise. Even the other values within that function will be wrapped inside the promise. This allows us to refrain from using the Promise keyword by ourselves, since it's done automatically behind the scenes.

1async function hello(){
2    try{
3        return("Hello")
4    }
5    catch(error){
6        return("Boo! You have a " + error)
7    }
8}
9hello().then(value => console.log(value));

Remember the hello() method we wrote earlier? Look how easy to read it has become just by using the async keyword.

Await is another keyword that is used in conjunction with async. Like the literal meaning of await, this keyword allows us to suspend an asynchronous function. It works only inside an async function because, at the end of the day, it is suspending an async function.

xxxxxxxxxx

async function hello() {

    return greeting = await new Promise((resolve, reject) => {

        setTimeout(() => resolve("Hello"), 1000)

    });

};

console.log("Before execution");

hello().then((value) => console.log(value));

console.log("After execution");