17

I was thinking what happens when an async function recursively calls itself infinitely. My thought was that it will not cause stack overflow. But I can't exactly point out why this is the case.

const foo = async () => {
    const txt = await Promise.resolve("foo");
    console.log(txt);
    foo();
}

foo();

The code above prints "foo" infinitely without overflowing the stack.

My idea is that the code is conceptually similar to the following, it doesn't cause stack overflow because the recursive call to foo() is inside the callback, the original call to foo() will return before that.

const bar = () => {
    console.log("foo");
    foo();
}

const foo = () => {
    setImmediate(bar);
}

foo();

I am looking for the exact answer as to what happens in the case of the async function.

Raju Ahmed
  • 170
  • 7
  • 5
    It's because the recursive async call will wait for the *current* execution to finish before making a new stack frame. Hence you don't run out of stack space. https://stackoverflow.com/questions/39459236/understanding-event-queue-and-call-stack-in-javascript – VLAZ May 19 '19 at 06:44
  • Yes, your explanation is correct. You would probably have a memory leak if you would `await foo()` though. – Bergi May 19 '19 at 14:42

2 Answers2

5

This function is syntactic sugar for 

const foo = () => 
  Promise.resolve(
    Promise.resolve("foo")
    .then(txt => {
      console.log(txt);
      foo();
    })
  );

foo();

This itself can be rewritten with less dependencies as

const foo = () =>
  queueMicrotask(() =>
    queueMicrotask(() => {
      console.log("foo");
      foo();
    })
  );
foo();

Window.queueMicrotask is a quite new method that gives us a way to trigger the queue a microtask operation that Promise.resolve and hence await do trigger.
Basically, this operation pushes the microtask at the end of the current execution, but before the end of the current event loop.

The sixth point of the algorithm reads

Set task's script evaluation environment settings object set to an empty set.

This is why you don't have a stack-overflow here. However, since you are never exiting the event loop, you are blocking the browser.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
2

Your code doesn't produce stack overflow because when you have call foo inside function it is not awaited. If you write await foo(); then it should cause stack overflow.

Consider below two cases:

Case 1 Here as per your code. From a() it will call foo without await. So what will happen when it calls foo() as it is async function, it would be scheduled to run after the current execution resolves. Or even more precisely, it will be queued for later execution and immediately a() will also continue from next line. You can see the output that a() is getting ended first, it doesn't wait for call stack for foo to return;

const foo = async () => {
    const txt = await Promise.resolve("foo");
    console.log(txt);
}

const a = async () => {
    const txt = await Promise.resolve("a");
    console.log(txt);
    foo();
    console.log("-- ENd of a() --");
}

a();

Case 2 Here inside a() it will call foo with await. You can see the output that a() is waiting for return from foo() then only it will continue on next line.

const foo = async () => {
    const txt = await Promise.resolve("foo");
    console.log(txt);
}

const a = async () => {
    const txt = await Promise.resolve("a");
    console.log(txt);
    await foo();
    console.log("-- ENd of a() --");
}

a();
Karan
  • 12,059
  • 3
  • 24
  • 40
  • 1
    "*will be called in parallel thread*" there is no parallel thread - it's the same thread but would be scheduled to run after the current execution resolves. Or even more precisely, it will be queued for later execution - you could have more items on the queue to execute before the recursive call. If async recursive callse were each in was a parallel thread, then first, recursive async calls would never be deterministic 2. they can lead to an effective fork bomb. – VLAZ May 19 '19 at 07:43
  • @VLAZ, You are correct. I know that javascript is `single threaded`, there is no such thing as `parallel thread` in javascript. I just thought it would be easy to explain that way. I have updated answer. But still you have any improvement then feel free to edit. Thanks. – Karan May 19 '19 at 07:58