I have some code here...

async function test() {
    for(let i = 0; i < 10000; i++){
        console.log("test");
    }
}

console.log("a");
test();
console.log("b");

I have some code here...

async function test() {
    for(let i = 0; i < 10000; i++){
        console.log("test");
    }
}

console.log("a");
test();
console.log("b");

Now my understanding is that test() here should run asynchronously and if I would want to run a routine after it's pletion I would use .then() after it.

I'm not doing that here though so surely it should just do it's thing in the background while everything else contiunes running? With that understanding I would expect some output like this:

a
b
test
test
..etc

However what I actually get is this...

a
test
test
...etc

b

Why does this happen? It seems that console.log("b") waits until test() pletes but that's synchronous behaviour.

Apologies if something similar has been asked before but I couldn't find anything on this myself.

• javascript
• asynchronous

• "It seems that console.log("b") waits until test() pletes but that's synchronous behaviour." uh, no, that is the definition of async. Asynchronous: one action at a time while waiting for the pletion of the previous to move to the next. – myself Commented Jun 30, 2022 at 2:07

5 Answers 5

Setting something as async will wrap the return object into a Promise. Promises are used to deal with asynchronous behavior, but there's nothing inherently asynchronous about the content of the test function. If instead you were to wrap the contents into a setTimeout function, that would cause a delay which would mimic asynchronous behavior and match the oute you were expecting.

async function test() {
  setTimeout(() => {
    for(let i = 0; i < 2; i++){
        console.log("test");
    }
  })
}

console.log("a");
test();
console.log("b")

If you're looking to set up background tasks that can lock up the browser's main thread, you should check out WebWorkers. They are a way to offload performance impacting tasks onto a separate thread.

Synchronous code inside an async function runs synchronously. The interpreter will only move on to the next line after the call of the async function (here, the console.log("b");) after all synchronous code has finished - for example, if it runs into an await.

Here, since there's no await or anything asynchronous at all going on in test, test runs to the end before the next line (that logs b) runs.

It's pretty similar to how the Promise constructor runs.

From MDN:

An async function can contain an await expression, that pauses the execution of the async function and waits for the passed Promise's resolution, and then resumes the async function's execution and returns the resolved value.

If you do not have an await expression you are never 'pausing' the coroutine and it will execute synchronously without letting other functions run.

an async function means that what is inside the function is expected to have some asynchronous calls. like if you had an Http call inside your test function.

and since nothing is asynchronous inside your function (you only have a normal loop) then your function will execute normally and sequentially until it finishes executing.

async keyword don't mean that function wil run asynchronously. To run it asynchronously use setTimeout or Promise etc.

function test() {
  setTimeout(() => {
    for(let i = 0; i < 3; i++){
        console.log("test");
    }
  });
}

console.log("a");
test();
console.log("b");

Async keyword usually is used with Promises and await keyword to write async code in synchronous way (to use await keyword we need put code inside async function)

function test() {
  return new Promise( res => {
    for(let i = 0; i < 3; i++){
        console.log("test");
    }
    res();
  });
}

async function start() {
  console.log("a");
  await test();
  console.log("b");
}

start();