8

I am trying to figure out how does asynchronous code work in Javascript. Now, I understand that there is actually one single thread in JS that executes jobs in a queue, and it can only start executing the next job if the current one is completed (i.e. if all of the sync code or an async function is completed).

Now, the confusing part is what actually counts as an asynchronous function - what actually gets put into a separate job in the queue, and what doesn't.

For start, we have the async keyword for functions. So does that mean those functions will be put into a separate job in the queue and be executed somewhere in the future? Well, actually it turns out the answer is NO. But bear with me, as I will explain.

As far as I understand, in theory, the JS thread is supposed to begin by executing all synchronous code until it completes, while delaying the execution of all async functions, promises and callbacks by placing them as jobs to the end of the queue. Then, once all sync code completes, it will start doing all those jobs that got piled up.

So if I have the following code:

async function asyncFunc() {
    console.log("executing async function");
}

console.log("starting sync code");
asyncFunc().then(() => {
    console.log("executing callback of async function")
});
console.log("sync code completed");

Then in theory, it should execute all sync code first, and only then start executing the async function and then the callback:

starting sync code
sync code completed
executing async function
executing callback of async function

But the reality is different! In reality, it actually executes the async function synchronously, together with the rest of the sync code. The only bit that actually gets put into the job queue is the callback of the async function:

starting sync code
executing async function
sync code completed
executing callback of async function

So what does that mean? That async functions are actually a lie? It seems so, as they are actually normal, synchronous functions that you can happen to attach an async callback to.

Now, I know that async is actually a syntactic sugar for a function that returns a Promise, such as:

async function asyncFunc() {
    console.log("executing async function");
}

is syntactic sugar for:

function asyncFunc() {
    return new Promise((resolve) => {
        console.log("executing async function");
        resolve();
    });
}

But my point still remains. The supposedly-async function that you pass into the promise actually is executed synchronously. Well, technically the Promise object doesn't imply that it will be executed asynchronously, but the async keyword does! So it's outright false information, it makes you believe that it's asynchronous, when it demonstrably isn't.

Improve this question
8
  • Your asyncFunc is actually a synonym to function asyncFunc() { console.log("executing async function"); return new Promise(); } So there is no lie - it's just not doing what you thought it was. Commented Sep 12, 2019 at 11:46
  • If you write an async function that never calls await, then yes, this is no surprise. The async/await syntax is really just that: a syntactic convenience for managing the problem of chains of .then() callback code with plain Promise objects. Commented Sep 12, 2019 at 11:48
  • It's still a lie, because having async in front of the function implies that the whole body of the function is executed asynchronously, while it isn't. Commented Sep 12, 2019 at 11:48
  • 2
    You have misunderstood the intention of the async/await syntax. Commented Sep 12, 2019 at 11:49
  • 1
    Really the best way to think about async as being a sort of "type" declaration that tells JavaScript "this function returns one or more Promise objects". The parser can then build the code for the function as a generator function, with each internal await expression really meaning a yield of another Promise. Commented Sep 12, 2019 at 11:53

2 Answers 2

Reset to default
10

Just like when constructing a Promise, anything synchronous inside an async function before any awaits are encountered will execute synchronously. An async function will only stop executing its code once it encounters an await - until then, it may as well be a normal non-async function (except for the fact that it'll wrap the return value in a Promise).

async function asyncFunc2() {
  console.log("in Async function 2");
}
async function asyncFunc1() {
  console.log("in Async function 1");
  await asyncFunc2();
  console.log('After an await');
}
console.log("starting sync code");
asyncFunc1().then(() => {
  console.log("Received answer from async code");
});
console.log("finishing sync code");

As you can see in the snippet above, the main thread only resumes outside of asyncFunc1 once asyncFunc1's await (and all synchronous code invoked by that await) is complete.

async is a keyword that allows you to use await inside of a function, but it doesn't intrinsically mean anything else, really - it's just a keyword. The function may even run all of its code synchronously (though that'd be kind of weird to see).

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Actually, that seems to be wrong also. It executes the code after an await synchronously as well. Example: javascript async function asyncFunc2() { console.log("in Async func 2"); } async function asyncFunc1() { console.log("in Async func 1"); await asyncFunc2(); } console.log("starting sync code"); asyncFunc1().then(() => { console.log("Received answer from async code"); }); console.log("finishing sync code"); Output: javascript starting sync code in Async func 1 in Async func 2 finishing sync code Received answer from async code
Nowhere in there are you waiting until after an await to log things, so you see finishing sync code at the end, just before the Promise resolves and the Received answer from async code - your functions may as well be a return Promise.resolve(). It's only when something is done after an await that you'll see those things being done after the lower sync code is done
Yeah, so that makes them not truly "asynchronous" functions, but "asynchronous-only-after-the-line-with-an-await-keyword-if-it-exists" functions.
@YevgeniN I think you should read more into what async/await actually is. The first await is where the return new Promise ... part would be
@YevgeniN Yep, that's a pretty precise way of putting it. You can put a Promise.resolve().then(asyncFunc1) to run stuff only after all synchronous lower code is done
1

Just to prove mine and @CertainPerformance's point. Here is the same example with a sleep function that waits 500ms before resolving that is awaited:

async function sleep(msec) {
  return new Promise(resolve => setTimeout(resolve, msec));
}

async function asyncFunc() {
  await sleep(500);
  console.log("executing async function");
}

console.log("starting sync code");
asyncFunc().then(() => {
  console.log("executing callback of async function")
});
console.log("sync code completed");

And here with just a console.log:

async function sleep(msec) {
  console.log('test');
} 

async function asyncFunc() {
  await sleep(500);
  console.log("executing async function");
}

console.log("starting sync code");
asyncFunc().then(() => {
  console.log("executing callback of async function")
});
console.log("sync code completed");

Improve this answer

2 Comments

Yes, this works because setTimeout always schedules a new job. That seems to be the only way to force code to execute asynchronously. But if, for example, you replace setTimeout(resolve, msec) with just a console.log, it will still call it synchronously.
I mean that the console.log itself will be called synchronously. I see now that only the code after the line with an await keyword is actually called asynchronously.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.