0

I was presented this coding question on a job application and I want to learn and understand, so here is the code question and then I will provide my interpretation and ask the SO community to elaborate/correct my interpretation:

async function someFunction() {
    console.log('someFunction'):
}

console.log('start');
someFunction();
console.log('end');

The output here is arguably unpredictable in my opinion, the order now, simply because we know the implementation of someFunction starts with a console.log will be:

  • start
  • someFunction
  • end

I have run this code in my browser and I do see that it always runs in this order. I am just not sure as to the reason why.

Reading online, "forgetting" the await keyword for the execution of async someFunction the function will still execute asynchronously.

My reasoning is that, albeit someFunction is async and returns a promise, the first line of execution of someFunction will occur before console.log('end'). I am not sure why many developers think that these are good hiring questions, perhaps they are. I just find them to be trick questions that are not real world. In the real world, the promise returned by someFunction would be handled, for example:

console.log('start');
await someFunction();
console.log('end');

I would appreciate an explanation of this code please.

Brian Ogden
  • 18,439
  • 10
  • 97
  • 176
  • 1
    It's completely deterministic - `async function`s will halt at the first `await`. Since there isn't any it's basically the same as a normal function. – VLAZ Oct 08 '19 at 18:27
  • 2
    you can run this in your browser's console and see the exact answer – imjared Oct 08 '19 at 18:28
  • Also, why this is a good question: *it's important". Imagine you have `async () {nonAsuncMutation(); await someFn(); differentNonAsyncMutation()}` if you want both non-async functions to run *together* you put them before or after the `await`. – VLAZ Oct 08 '19 at 18:29
  • @VLAZ yes but see my question change, in the real world, you put await from someFunction(); you do not call an async function like a normal function, that is just bad coding yes? – Brian Ogden Oct 08 '19 at 18:31
  • Yep, there is no `await`, hence the function is executed synchronously. – VLAZ Oct 08 '19 at 18:41
  • @VLAZ Ok I do not understand, reading online, if you forget the await keyword the function will still execute async – Brian Ogden Oct 08 '19 at 18:47
  • But the async function *won't*. This is the important part an async function is only *partly* executed asynchronously - only the code after `await`. Any code *before* `await` is synchronous and will always be run in the same sequence as the other code before and after the function invocation. – VLAZ Oct 08 '19 at 18:50
  • 2
    Possible duplicate of [Async function without await in Javascript](https://stackoverflow.com/questions/45594596/async-function-without-await-in-javascript) – Heretic Monkey Oct 08 '19 at 18:54
  • 1
    There are many real-world `async` functions that aren't awaited. In fact, you can't `await` in top level scope (but you can `then` it). – marzelin Oct 08 '19 at 19:04
  • 1
    @BrianOgden [here](https://stackoverflow.com/questions/58612969/different-behavior-of-async-functions-when-assigning-temporary-to-variable/) is an actual example of the placement of `await` making a difference. If you do `result = await getResult(); array = array.concat(result)` that's *different* to `array = array.concat(await getResult())` even if normally inlining a variable will not make a difference. More generally, you can have the same problem with `myVar = myVar + await getResult()` - anything that mutates a variable and different timings of when it happens lead to different results. – VLAZ Nov 01 '19 at 16:24

1 Answers1

2

The order here is completely deterministic it will always be start -> someFunction -> end:

async function someFunction() {
    console.log('someFunction');
}

console.log('start');
someFunction();
console.log('end');

This is because only an await will pause the execution of an async function. Any code before an await will be executed synchronously, while any code after an await will only run after the promise awaited is resolved:

async function someFunction() {
  console.log('someFunction - before await');
  
  await otherFunction();
  
  console.log('someFunction - after await');
}

async function otherFunction() {
  console.log('otherFunction');
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      console.log('promise resolved');
      resolve();
    }, 0);
});
}

console.log('start');
someFunction();
console.log('end');

This can come into play if you have non-trivial async functions that might do multiple actions and it matters what order they are in:

//sample shared variable
let counter = 1;

async function someFunction() {
  console.log('someFunction - before await counter is:', counter);
  
  let awaitResult = await otherFunction();
  
  console.log('someFunction - after await counter is: ', counter, '\nawaited function returned: ', awaitResult);
}

async function otherFunction() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve(counter);
    }, 0);
});
}

someFunction();
counter += 1;

This is a dumbed down example but it showcases what can happen - if you read someFunction you could assume that counter has the same value both times. But that's not correct, since the mutation of the variable happens after the first read and before the second one. The await is what makes the difference.

VLAZ
  • 26,331
  • 9
  • 49
  • 67