async / await and stack

[gunb0s]

function delay(ms) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(new Date())
        }, ms)
    })
}

async function playingWithDelay() {
    console.log('Delaying...', new Date())

    const dateAfterOneSecond = await delay(1000)
    console.log(dateAfterOneSecond)

    const dateAfterThreeSeconds = await delay(3000)
    console.log(dateAfterThreeSeconds)

    return "done"
}

playingWithDelay()
    .then(result => {
        console.log(`After 4 seconds: ${result}`)
    })

i'm playing with simple code above.
when i debug this code, stack unwindling happens first at await delay(1000).
I guessed that stack should remains until return 'done'

it didn't register a callback, so after unwinding the stack, how could it return to the original code context after the asynchronous operation(delay(1000)) was completed??

[pietro909]

I'm giving it a try to explain what I think occurs. I'm very happy if anyone can point out errors in my answer or improve it 🙏

The async/await syntax is syntactic sugar for Promises. Hence playingWithDelay can be rewritten as:

function playingWithDelay() {
    console.log('Delaying...', new Date())

    return delay(1000).then(dateAfterOneSecond => {
        console.log(dateAfterOneSecond)
        return delay(3000).then(dateAfterThreeSeconds => {
          console.log(dateAfterThreeSeconds)
          return "done";
         });
    })
}

Now it should be more clear how it works. You are registering a callback every time you use await.

[gunb0s]

thx for clear answer!

i am now able to understand what syntatic sugar really means !
Async/await just acts as an eye trick to make asynchronous code look synchronous