I am a bit confused on what the "async" keyword actually does to a function in Javascript. Previously, I thought it made the function asynchronous and non blocking (execute it on a separate worker thread possibly, OR at the very least enqueue it on the event queue, which would delay its invocation until everything on the call stack had finished). But it seems as if neither are the case based on a simple test I ran.
async function asyncFunction() {
for(let i = 0; i < 10000; i++)
{
console.log("i = ", i);
}
}
function normalFunction() {
console.log("I'm a normie!")
}
asyncFunction();
normalFunction();
/*
OUTPUT
i = 1
i = 2
i = 3
i = ...
i = 9999
I'm a normie!
*/
So my first question based off this output is: 1. What does async keyword even do outside of the context of await?
Furthermore, I thought this was interesting so I thought I'd mess around a bit with promises to see if my understanding was incorrect there as well, which it turns out it was...
const myPromise = new Promise((resolve, reject) => {
console.log("Hello from inside executor function");
resolve("beep bop");
})
myPromise.then((resolveValue => {
console.log("resolveValue: ", resolveValue);
}))
console.log("Wasup");
/*
OUTPUT
Hello from inside executor function
Wasup
resolveValue: beep bop
*/
Previous to this test, I incorrectly assumed that promises immediately invoked the executor function via a setTimeout(executor, 0) call in order to delay (push it to the event queue) so that the correct .then bindings would be attached before it was called. I assumed this because an article I read suggested the following is how Promises are implemented under the hood...
//Keep in mind the following is heavily oversimplified, non-chainable, and only accepts a resolve callback
class Promise
{
constructor(executorFunc) {
this.myResolve = () => {};
setTimeout(() => executorFunc(this.myResolve), 0);
}
then(newResolve){
this.myResolve = newResolve;
}
}
But the OUTPUT from the second promise tests shows that the executor function actually runs immediately and only the attached callbacks via .then are placed on the event queue awaiting the completion of the current call stack. So my second question is 2. How is it possible to change the implementation of the oversimplified promise class such that the executor function's main logic runs immediately and only the callbacks are put on the event queue?
Is it as simple as changing
setTimeout(() => executorFunc(this.myResolve), 0);
TO
executorFunc((data) => setTimeout(this.myResolve(data), 0));
Any help is greatly appreciate. Thanks!