Control asynchronous code in JavaScript

Synchronous vs Asynchronous?

• Synchronous is a term for executing program sequentially. In short, we will call it sync
• Asynchronous is a term for executing program sequentially but when it has a blocking call, it doesn't wait rather than execute next line. In short, we will call it async

Is Asynchronous sucks?

NO. It's good for some reason. For example, you have millions of network activity like you have a large number of users. In that case, it's really suitable to use an asynchronous way.

How write synchronous code is javascript?

We already know javascript follows the asynchronous architecture. Where it follows single-threaded concurrency. Let's not talk so much rather than see an example.

Look at the following code

function foo() {
    console.log("I am foo function")
    setTimeout(() => {
        console.log("This will delay 3 seconds")
    }, 3000)
    console.log("Function Ended")
}

OUTPUT:

I am foo function
Function Ended
This will delay 3 seconds

We have clearly seen the behavior of asynchronous programming. Do you have any idea to print the 3rd line before the second? No worry. We will talk about it. There are some ways to achieve this. Let's do it.

Example (Promise Implementation)

function delayThreeSeconds() {
    // Return new promise
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("This will delay 3 seconds")
            // simple resolve the promise
        resolve(/* We can pass data here. */)
        }, 3000)
    })
}

// Rewrite the foo funtion and call the delayThreeSeconds function
function foo() {
    console.log("I am foo function")
    // Now program will wait 3 seconds to resolve from delayThreeSeconds funtion
    delayThreeSeconds().then(() => {
        console.log("Function Ended")
    })
}

// Another way to call it
async function foo() {
    console.log("I am foo function")
    // Now program will wait 3 seconds to resolve from delayThreeSeconds funtion
    await delayThreeSeconds()
    console.log("Function Ended")
}

OUTPUT:

I am foo function
This will delay 3 seconds
Function Ended

Note async/await is works only es6. So browser support is important here. If you use babel, webpack or any other transpiler to transpile es6 to es5/browser supported javascript then it's gonna work for you.

Comments

[Nick Taylor]

Just to clarify, this is still asynchronous code, i.e. Promise and async/await.

[Mohamad Ashraful Islam]

yes. still asynchronous but work like synchronized way. isn't it?

[Nick Taylor]

The example you show with async/await allows you to write asynchronous code in a "synchronous" say, but it is still asynchronous.

If that's what you were trying to demonstrate, then the title of the post is misleading. I imagine it would confuse others as well and especially those who might be new to JS. 😉

[Mohamad Ashraful Islam]

I read about it and now I really feel the same way with you. Thanks for such a nice compliment. :)