DEV Community

Cover image for Control asynchronous code in JavaScript
Mohamad Ashraful Islam
Mohamad Ashraful Islam

Posted on • Edited on

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")
}

Enter fullscreen mode Exit fullscreen mode

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")
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (4)

Collapse
 
nickytonline profile image
Nick Taylor

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

Collapse
 
ashraful profile image
Mohamad Ashraful Islam

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

Collapse
 
nickytonline profile image
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. 😉

Thread Thread
 
ashraful profile image
Mohamad Ashraful Islam

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