How do I access data in an array that was returned by a function?

Question

I have a function which returns a value containing array and inside the array their is an object data whose value I want to access.

Right now, What I am doing is

let budgets = await this.getReferenced(wipDocStore, facebookAdData, 'budget')
    budgets = budgets[0].data

But, I am not sure if that is a neat way or what people generally do.

Being new to JavaScript, I thought something like this would be equivalent to above code

let budgets = await this.getReference(DocStore, AdData, 'budget')[0].data

but it isn't not (why?). The other thing which I can do is directly return the relevant data in getReference function but since that is reusable function, I won't always want data in 0th position of array.

In general, Do experienced programmer also would break the above code in two parts

let budgets = await this.getReference(DocStore, AdData, 'budget')
    budgets = budgets[0].data

if they can't change this.getReference function? also, why does this doesn't work?

let budgets = await this.getReference(DocStore, AdData, 'budget')[0].data

Answer 1

Forget whatever it is you think you want to learn about "neat tricks".

1. Don't declare a variable just to reassign it to something else of a completely different type on the next line. This is code smell, and in languages like TypeScript it's a big no-no because it breaks type-safety also makes it harder for the engine to optimize.
2. If you're having a hard time reading a statement, it's because it needs to be broken up into simpler statements, not condensed into a smaller, harder-to-read statement.

With that in mind, consider the following:

const reference = await this.getReference(DocStore, AdData, 'budget')
const budgets = reference[0].data

This has no ambiguity, and it clearly conveys what is being done, step-by-step. You await the reference, then get the data from the first entry in the reference array. In addition, having a const declaration is nice since you can immediately conclude that the values will never be re-assigned as you're reading the code.

This is also good for optimization, because using a constant reference can reduce the amount of calls to unboxing its value in the underlying engine since it will remain the same type and same reference for the duration of its lifetime.

Answer 2

Think of the ambiguity. Are you await ing this.getReferenced(...) , or this....data ? To directly dereference the result, you'll need to clear that up using parentheses:

let budgets = (await this.getReference(DocStore, AdData, 'budget'))[0].data;

Whether this is really more readable than breaking it into two lines, you decide for yourself.

Answer 3

const budgets = await this.getReferenced(wipDocStore, facebookAdData, 'budget').then(results => results[0].data)

Answer 4

You could do

let budgets = (await this.getReference(DocStore, AdData, 'budget'))[0].data;

But if you only want the attribute data then this is another option:

let {data} = (await this.getReference(DocStore, AdData, 'budget'))[0]

Wrapping data in parentheses means you only want to fetch the attribute named data .

But to make it more readable in my own opinion this would be the best option:

let budgets = await this.getReference(DocStore, AdData, 'budget');
let {data} = budgets[0];

Answer 5

If you take a look into:

MDN await

You will see that the await keyword will await for the promise to fullfill or reject. Or return imediatly the value if you do not pass a promise.

So you have two options: passing a promise or a value as the expression since await expects an expression.

In here:

let budgets = await this.getReference(DocStore, AdData, 'budget')[0].data

Since it expects an expression, that expression will be evaluated first and so the return value is undefined, since you are accessing a function at index 0.

And as the rules state if you pass a value to the await keyword it will immediately return that value.