Discussion on: Async programming basics every JS developer should know

[Nemanja Petrovic]

In the last example, do you really need

 return promise = new Promise(function(resolve) {
        resolve(newScore);
    });

in each function, or you can simply return?

return value + {integer};

By the way, great article!

[Joep van Liempd]

I think the author was returning those Promises explicitly here to illustrate the point of being able to "get the value out of" the Promise using the await keyword, without having to jump through the normal .then(fn) hoops. An alternative (usually considered to be more idiomatic) way to write the return statements would have been return Promise.resolve(newScore);.

However, without any "real" async logic in those functions, you could indeed simply return and it would preserve the current behaviour; you can await a regular value just fine (i.e. let x = await 5 is valid syntax). As far as I'm aware it can potentially affect the order in which things are processed within the current iteration of the event loop, but that won't observably influence things in most cases, including this one.

For completeness' sake, we could take things one step further by making the level functions async as well. An async function will always return a Promise implicitly, so the following are functionally equivalent:

async function levelOne(value) {
  return value + 5;
}

function levelOne(value) {
  return Promise.resolve(value + 5);
}

This way, we can leave the explicit Promises out, but still benefit from the asynchronous flow.

To make the asynchronous behaviour clearer, we could introduce a "wait" function as well, which does nothing more than resolve the Promise it returns after the passed amount of milliseconds:

// note: there is no need to mark this function `async`,
// as we need to explicitly return a `Promise` anyway in
// order to make use of `resolve`
function wait(ms) {
  return new Promise(function(resolve) {
    setTimeout(resolve, ms);
  });
}

async function levelOne(value) {
  await wait(500);
  return value + 5;
}

async function levelTwo(value) {
  await wait(500);
  return value + 10;
}

async function levelThree(value) {
  await wait(500);
  return value + 30;
}

async function startGame() {
  let currentScore = 5;
  console.log('Game Started! Current score is ' + currentScore);
  currentScore = await levelOne(currentScore);
  console.log('You have reached Level One! New score is ' + currentScore);
  currentScore = await levelTwo(currentScore);
  console.log('You have reached Level Two! New score is ' + currentScore);
  currentScore = await levelThree(currentScore);
  console.log('You have reached Level Three! New score is ' + currentScore);
}

startGame();

If you run this code (e.g. paste it into your console and press enter), you'll see that it runs just as the code in the article, the difference being it has 500ms pauses in between the log messages (the number 500 coming from the value that is passed to wait in each case).

Note that if you were to remove the await keywords in the level functions, that would take away the 500ms pause in that spot. The wait function would still be called, but the engine is not instructed to wait for the returned Promise to resolve before continuing, so it will just move on to the next statement immediately.

[Siwalik Mukherjee]

I couldn't have explained this question better @Joep 😀Thank you 🙏

[Joep van Liempd]

My pleasure!