The idea
A server can take a second to answer. The JavaScript engine runs one thing at a time, so code must never sit and wait. async and await let one function pause while the rest of the program keeps running.
Lines 1 to 8 define two functions; nothing runs yet. wait returns a promise that a timer fulfils after ms milliseconds, standing in for a server. async before getUser means calling it always returns a promise.
Running until await
Line 9 calls getUser(). An async function starts running at once, like any function: the engine puts it on its call stack, the list of functions now running. It also makes a promise for its result, still pending.
The body runs line by line, just like normal code, until it reaches an await. Line 4 prints "asking" to the console.
Line 5 first calls wait(1000, "Ada"). It starts a 1000 ms timer and at once returns a promise that is still pending. The answer is not here yet, but the promise is: a placeholder for it.
Paused, not blocked
await pauses getUser until that promise settles. Its frame leaves the call stack and waits on the promise, with its place saved. getUser() hands line 9 its pending promise, and .then saves a callback on it.
The engine is free, so the script carries on: line 10 prints "not blocked". This is the point of await: one function waits, the program does not. Then the script ends and the call stack is empty.
Resuming
About 1000 ms later the timer calls res("Ada"). The promise from wait is now fulfilled with "Ada". That queues a job, resume getUser, in the microtask queue. Jobs there run as soon as the call stack is empty.
The call stack is empty, so the event loop runs the job. getUser goes back on the call stack and continues inside line 5: await gives back "Ada", so name now holds "Ada".
From here getUser reads like plain step-by-step code. Line 6 prints "got Ada". No callbacks were needed to use the answer: await handed it straight to the next line.
Line 7 returns "ADA" and getUser ends; its frame leaves the call stack. Returning from an async function fulfils its promise, so the promise from line 9 now holds "ADA".
The fulfilled promise queued the callback saved on line 9. When the stack is empty it runs with v = "ADA" and prints it. Final output: asking, not blocked, got Ada, ADA.
What happens
// step 1/12 · idea
problem asking a server takes time (often 100s of ms)
engine runs one piece of code at a time
a busy wait would freeze the whole page
promise an object for a value that arrives later
await pauses one async function until its promise settles
standard ECMAScript (ECMA-262): async functions, await
wait is a stand-in for a real request. fetch(url) works the same way: it returns a promise at once, and the network fulfils it later with a Response, so you write const res = await fetch(url). Promise jobs are called microtasks. They run whenever the call stack empties, before the browser moves on to the next task such as a timer, a click or a redraw. The ECMAScript specification calls them jobs.