Async and await in javascript

Question

I am a beginner in JS and while going through async and await and I came across the below example:

const get = async () => {
    const y = await "hello";
    console.log(y);
}

console.log("start");
get();
console.log("end");

O/P

start
end 
hello

But according to my understanding await blocks the execution of the current program until the promise is available, then why in the above example that doesn't happen? Is my understanding incorrect or some other concept is missing?

Answer 1

When an async function hits the first await in the function, it immediately suspends further execution of that function and then immediately returns a promise from the function. The caller receives that promise and continues to execute. So, the current function is suspended, but not the caller or the rest of the JS engine.

So, in your code:

const get=async ()=>{
    const y=await "hello"
    console.log(y)
}

console.log("start")
get()
console.log("end")

Here's the sequence of events:

1. Logs "start"
2. Starts to execute get()
3. Gets to the first await
4. Suspends further execution of the get() function
5. Returns promise from get()
6. Calling code continues to execute and logs "end"
7. When calling code returns back to the event loop, the await finishes because there was no actual promise there to wait for and the get() function resumes executing and it logs "hello"

So, await only suspends execution of the current function, causing it to immediately return a promise and the calling code then continues to execute. Sometime later when the statement you are awaiting resolves (usually a promise) and the interpreter has returned back to the event loop, then the function will continue its execution until either the next await or until it gets to its return value which then becomes the resolved value of the promise it originally returned and that promise gets resolved (which your code was ignoring).

Note, await should generally be used with promises, not with constants. Though it doesn't cause an error to await something that isn't a promise, it doesn't do anything useful.

Answer 2

await is not blocking the execution of the program, it defers the continuation of the currently executed async method to a microtask and continues executing the code of the async method caller.

When you await something that is not a Promise(string, number or whatever) it will automatically be wrapped in a Promise and that promise will be awaited.

So yes, everything works as expected in your code sample.

Answer 3

First of all async/await works with promises https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

not with strings.

If you want your code to work, here is an example =)

const helloPromise = new Promise((resolve) => resolve('hello'));

const get = async () => {
  const y = await helloPromise;
  console.log(y);
}

const main = async () => {
  console.log("start");
  await get();
  console.log("end");
}

main();