allTogetherBad.js

function makeSoup() {
  const pot = boilPot();
  chopCarrots();
  chopOnions();
  await pot;
  addCarrots();
  await letPotKeepBoiling(5);
  addOnions();
  await letPotKeepBoiling(10);
  console.log("Your vegetable soup is ready!");
}

makeSoup();

allTogetherGood.js

async function makeSoup() {
  const pot = boilPot();
  chopCarrots();
  chopOnions();
  await pot;
  addCarrots();
  await letPotKeepBoiling(5);
  addOnions();
  await letPotKeepBoiling(10);
  console.log("Your vegetable soup is ready!");
}

makeSoup();

asyncFunctions.js

async function letPotKeepBoiling(time) {
  return /* A promise to let the pot keep boilng for certain time */
}

async function boilPot() {
  return /* A promise to let the pot boil for time */
}

awaitExample.js

async function asyncFunction() {
  /* Returns a promise... */
}

result = await asyncFunction();

callbackHell.js

function callbackHell() {
  boilPot(() => {
    addCarrots();
    letPotKeepBoiling(
      () => {
        addOnions();
        letPotKeepBoiling(
          () => {
            console.log("Your vegetable soup is ready!");
          },
          1000,
        );
      },
      5000
    )
  },
  5000,
  chopCarrots(),
  chopOnions(),
  );
}

complete.js

function chopCarrots() {
  let k = 0;
  for (let i=0; i<10000; i++) {
    for (let j=0; j<10000; j++) {
      k = Math.pow(k, i * j) / k
    }
  }
  console.log("Done chopping carrots!");
}

function chopOnions() {
  let k = 0;
  for (let i=0; i<10000; i++) {
    for (let j=0; j<10000; j++) {
      k = Math.pow(k, i * j) / k
    }
  }
  console.log("Done chopping onions!");
}

function addOnions() {
  console.log('Add Onions to pot!');
}

function addCarrots() {
  console.log('Add Carrots to pot!');
}

async function letPotKeepBoiling(time) {
  return new Promise((resolve) => setTimeout(() => {
    console.log("Pot has boiled for ", time, " minutes");
    resolve();
  }, time * 100));
}

async function boilPot() {
  return new Promise((resolve) => setTimeout(() => {
    console.log("Done boiling pot!");
    resolve();
  }, 5000));
}

async function makeSoup() {
  const pot = boilPot();
  chopCarrots();
  chopOnions();
  await pot;
  addCarrots();
  await letPotKeepBoiling(5);
  addOnions();
  await letPotKeepBoiling(10);
  console.log("Your vegetable soup is ready!");
}

makeSoup();

cookDinner.js

makeSoup();
makePasta();

explicitPromises.js

function makeSoup() {
  return Promise.all([
    new Promise((reject, resolve) => {
      chopCarrots();
      chopOnions();
      resolve();
    }),
    boilPot()
  ]).then(() => {
    addCarrots();
    return letPotKeepBoiling(5);
  }).then(() => {
    addOnions();
    return letPotKeepBoiling(10);
  })
}

syncFunctions.js

function chopCarrots() {
  /**
   * Some long computational task here...
   */
  console.log("Done chopping carrots!");
}

function chopOnions() {
  /**
   * Some long computational task here...
   */
  console.log("Done chopping onions!");
}

function addOnions() {
  console.log('Add Onions to pot!');
}

function addCarrots() {
  console.log('Add Carrots to pot!');
}

I feel like I'm really close to my "Aha"-moment, because of your article. Thank you for that!
But.. I fear, I'm not quite there yet; I hope you can answer me these 2 questions:

1. Although I "know" the following cannot work, .. I cannot tell why it won't:

async function boilPot() {
  await setTimeout(() => {}, 5000);
  console.log('boiling!');
}

2. Since you don't use await inside of boilPot() AND you are already returning an explicit new Promise() in boilPot(), why do you still declare it as an async-function?
   makeSoup() should't care if you use async or return an explicit Promise, right?

Oh and one more minor thing:
I guess you meant 1000 instead of 100 in line 33 of complete.js

  }, time * 1000));

@katerlouis

1. setTimeout is actually ancient and isn't a promise, therefore you can't use await on it. It's why a lot of the my functions had to return a Promise of setTimeout instead.

2. You're right, there's no need to give the function signature the async flag anymore. However, I'd consider it good practice because its much more convenient to look at the function signature to see that it returns a Promise for sure, rather than to have to look into the actual implementation, especially if its a big function. It's also nicer in my opinion to have every function that handles Promises (or async) be flagged as such for consistency.

3. Yeap, you're right xD

  let k = 0;
  /* for loops */
      k = Math.pow(k, i * j) / k;

Since k=0, it means dividing from 0 in the first place, the calculation gives Infinity... and then 0 or NaN in other cases...
Does that have any particular purpose? 🤔

Forgive me but I am a Python user going to come in here and ask some questions:

import time
import asyncio

async def heatThePan():
    print("Heating the pan for 2 seconds")
    await time.sleep(2)
    return 

def heatThePanNotAsync():
    print("Heating the pan for 2 seconds")
    time.sleep(2)
    return 

def cookEggs(numEggs: int):
    for i in range(numEggs):
        print("Cooking Egg # {0}".format(i))
        time.sleep(1)

def cookBreakfast():
    begin = time.time()
    heatThePan()
    cookEggs(2)
    end = time.time()
    return (end - begin)

def cookBreakfastSlowly():
    begin = time.time()
    heatThePanNotAsync()
    cookEggs(2)
    end = time.time()
    return (end - begin)

print("Slow way: {0}, Hopefully faster way: {1}".format(cookBreakfastSlowly(), asyncio.run(cookBreakfast())))

I understand that async basically stops a function; however, I don't understand why my code is resulting in an error - do async functions need to only be called by async functions?