Why recursive async functions in Javascript lead to stack overflow?

Question

Consider this snippet:

function f() {
  return new Promise((resolve, reject) => {
    f().then(() => {
      resolve();
    });
  });
}

f();

which can also be written like this:

async function f() {
  return await f();
}

f();

If you run any of the given two codes, you'll face this error:

(node:23197) UnhandledPromiseRejectionWarning: RangeError: Maximum call stack size exceeded

My question is why? Before answering my question, please consider my argument:

I understand the concept of recursion and how it leads to a stack overflow if there's no stopping condition. But my argument here is that once the first f(); is executed, it will return a Promise and it exits the stack so this recursion should not face any stack overflow ever. To me, this should behave the same as:

while (1) {}

Of course, if I write it like this, it will be fixed:

function f() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      f().then(() => {
        resolve();
      });
    }, 0);
  });
}

f();

which is a different story and I have no problem with it.

[UPDATE]

My bad, I forgot to mention I was testing with node v8.10.0 on the server side.

You are looking for `Promise.resolve().then(f)` or `await; return f()`. Currently your recursive calls are happening immediately. Remember [the `new Promise` executor callback is synchronous](https://stackoverflow.com/q/42118900/1048572). — Bergi, Jul 04 '19 at 13:58
Thanks @Bergi, but your second suggestion is a Syntax Error. — Mehran, Jul 04 '19 at 14:11

score 6 · Accepted Answer · answered Jul 04 '19 at 00:57

6

Why would you not expect it to cause infinite recursion? The constructor of the promise is calling f recursively so the promise never gets to construct as an infinite recursion loop occurs before the promise is constructed.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

From the link above

The executor function is executed immediately by the Promise implementation, passing resolve and reject functions (the executor is called before the Promise constructor even returns the created object).

answered Jul 04 '19 at 00:57

Adrian Brand

20,384
4
39
60

I think you're right but is there any way to write this not to face the problem? – Mehran Jul 04 '19 at 01:31
1

By not invoking a call to it's self before the promise is constructed. – Adrian Brand Jul 04 '19 at 02:08

Mehran · Answer 2 · 2019-07-04T14:39:39.980

Thanks to @Adrian, I managed to find a way not to face the stack overflow. But before that, he was right and that form a recursion should have led to stack overflow. And since the question is "why", his answer is the accepted one. This is my attempt on "how" not to face the stack overflow.

Test 1

function f() {
  return new Promise((resolve) => {
    resolve();
  }).then(f);
}

And using await:

Test 2

async function f() {
  return await Promise.resolve()
    .then(f);
}

I'm not sure if the Promise can be eliminated in this case!

And I know I said no setTimeout but this is an interesting case too:

Test 3

async function f() {
  await new Promise(resolve => setTimeout(resolve, 0));
  return f();
}

This will not face the stack overflow as well.

In the end, to give you a context why I was interested in this; let's say you are coding a function to retrieve all the records from AWS' DynamoDb. Since there's a limitation on how many records you can extract from DynamoDb with one request, you have to send as many as needed (with ExclusiveStartKey) to get all the records:

Test 4

async function getAllRecords(records = [], ExclusiveStartKey = undefined) {
    let params = {
        TableName: 'SomeTable',
        ExclusiveStartKey,
    };

    const data = await docClient.scan(params).promise();
    if (typeof data.LastEvaluatedKey !== "undefined") {
        return getAllRecords(records.concat(data.Items), data.LastEvaluatedKey);
    }
    else {
        return records.concat(data.Items);
    }
}

I wanted to make sure this will not face a stack overflow EVER. It was not feasible to have such a huge DynamoDb table to actually test this. So I came up with some examples to make sure of that.

At first, it seemed like that test #4 could actually face a stack overflow, but my test #3 shows that there's no such possibility (because of the await docClient.scan(params).promise()).

[UPDATE]

Thanks to @Bergi, here's a code for await without a Promise:

Test 5

async function f() {
  await undefined;
  return f();
}

Why recursive async functions in Javascript lead to stack overflow?

2 Answers2

Related