async call to function with multiple returns

Question

An async function I am dealing with, returns multiple values in array

const funcName = async function (arg) {
  ...
  return [val1, val2];
}

While calling this function, I find that it is not possible to directly access individual return values in a syntax:

result1 = await funcName(arg)[0]  
result2 = await funcName(arg)[1]

The only way (known to me so far) it works, is to break it down:

result = await funcName(arg)
result1 = result[0]
result2 = result[1]

Is there a way to "collect" the return directly in a single LOC?
(closely, like r1 = await fn(x)[0])
This works obviously for sync variant, and keeps code much precise, clean, while readable.

Bonus ask: any clue why direct array access is not supported?
By intent, or just missed out?

score 1 · Answer 1 · edited Jun 18 '20 at 13:40

1

const [result1 ,result2]= await funcName(arg)

edited Jun 18 '20 at 13:40

Wai Ha Lee

7,664
52
54
80

answered Jun 18 '20 at 09:47

ebyte

969
5
15

decontruct... – C. Derx Jun 18 '20 at 09:49

score 1 · Answer 2 · answered Jun 18 '20 at 09:48

1

You can use array destructuring:

const [val1, val2] = await funcName(arg);

answered Jun 18 '20 at 09:48

D. Pardal

4,876
1
13
32

score 1 · Accepted Answer · answered Jun 18 '20 at 12:33

The syntax for the await operator is

await UnaryExpression

Which means that the entire expression will be evaluated before handing over to await. Here is a breakdown of what happens when you have await funcName(arg)[0]

funcName(arg) returns a promise.
[0] is the square brackets notation used on the promise. So, it's getting the property 0 from the promise object.
Since there is no such property, the result of the expression is undefined.
await is called on undefined. Since this isn't a promise, it's treated as if a Promise.resolve(undefined) and so there is nothing to wait to complete.
Code execution continues before the actual promise object from step 1. is complete.

You can force await to consider the returned promise, if you surround the correct part of the expression in brackets or to only use it on the expression that returns a promise:

const simpleAsync = async function () {
  return ["one", "two"];
}

async function main() {
  const foo = await simpleAsync()[0];
  const bar = (await simpleAsync())[0];
//            ^                   ^ 
  const baz = await simpleAsync();

  console.log("foo:", foo);
  console.log("bar:", bar);
  console.log("baz:", baz);
}

main();

However, if you want to directly get both return values, you can simply use destructuring for a multiple assignment:

const simpleAsync = async function () {
  return ["one", "two"];
}

async function main() {
  const [a, b] = await simpleAsync();

  console.log("a:", a);
  console.log("b:", b);
}

main();

This way await is called with an actual promise, rather than a non-promise and after that is resolved, the a and b variables will be assigned.

async call to function with multiple returns

3 Answers3