What do double brackets mean in javascript and how to access them

Question

Situation

I have the following function which uses Promise.

var getDefinitions = function() {
    return new Promise(function(resolve) {
        resolve(ContactManager.request("definition:entities"));
    });
}

var definitions = getDefinitions()

The contents of definitions is:

Promise {
    [[PromiseStatus]]: "resolved",
    [[PromiseValue]]: child
}

Accessing the PromiseValue property directly returns undefined

var value = definitions.PromiseValue; // undefined

Question

What do the double brackets [[ ]] mean, and how do I retrieve the value of [[PromiseValue]].

Answer 1

What's the stuff inside [[]]

My question is what do the double brackets [[ ]] mean, and how do I retrieve the value of [[PromiseValue]].

It's an internal property. You cannot access it directly. Native promises may only be unwrapped in then with promises or asynchronously in generally - see How to return the response from an asynchronous call. Quoting the specification:

They are defined by this specification purely for expository purposes. An implementation of ECMAScript must behave as if it produced and operated upon internal properties in the manner described here. The names of internal properties are enclosed in double square brackets [[ ]]. When an algorithm uses an internal property of an object and the object does not implement the indicated internal property, a TypeError exception is thrown.

You cannot

Seriously though - what are they?

Very nice! As the above quote says they're just used in the spec - so there is no reason for them to really appear in your console.

Don't tell anyone but these are really private symbols. The reason they exist is for other internal methods to be able to access [[PromiseValue]]. For example when io.js decides to return promises instead of taking callbacks - these would allow it to access these properties fast in cases it is guaranteed. They are not exposed to the outside.

Can I access them?

Not unless you make your own Chrome or V8 build. Maybe in ES7 with access modifiers. As of right now, there is no way as they are not a part of the specification and will break across browsers - sorry.

So how do I get my value?

getDefinitions().then(function(defs){
    //access them here
});

But what if it returns an error? In prevision towards these cases, add the following at the end (and outside of) of your .then().

.catch(function(defs){
    //access them here
});

Although if I had to guess - you're not converting the API correctly to begin with since this conversion would only work in case the method is synchronous (in that case don't return a promise) or it returns a promise already which will make it resolved (which means you don't need the conversion at all - just return.

Answer 2

I also walked into this problem today and happened to find a solution.

My solution looks like this:

fetch('http://localhost:3000/hello')
.then(dataWrappedByPromise => dataWrappedByPromise.json())
.then(data => {
    // you can access your data here
    console.log(data)
})

Here, dataWrappedByPromise is a Promise instance. To access the data in the Promise instance, I found that I just needed to unwrap that instance with the .json() method.

Hope that helps!

Answer 3

This example is with react but for the most part it should be the same.

Replace this.props.url with your url to fetch to make it work for most other frameworks.

Parsing the res.json() returns the [[promiseValue]] however if you then return it to another .then() method below you can return it as a total array.

let results = fetch(this.props.url)
        .then((res) => {
            return res.json();
        })
        .then((data) => {
            return data;
        })

Answer 4

Try using await.

Instead of

var value = definitions.PromiseValue 

use

var value =  await definiton;

This might solve your purpose by yielding the promise value.

Note that await can only be used inside async functions, and it is an ES2016 feature.

Answer 5

Reading the manpage, we can see that:

By design, the instant state and value of a promise cannot be inspected synchronously from code, without calling the then() method.

To help with debugging, only when inspecting a promise object manually, you can see more information as special properties that are inaccessible from code (this, at present, is implemented by randomizing the property name, for the lack of more sophisticated language or debugger support).

Emphasis mine. Therefore, what you want to do cannot be done. The better question is why do you need to access the promise state like that?

Answer 6

I think that it will go well with this.

(async () => {
  let getDefinitions = await ( () => {
    return new Promise( (resolve, reject) => {
      resolve(ContactManager.request("definition:entities"));
    });
  })();
)();

Answer 7

For the case when the response returned is HTML, not a JSON

fetch('http://localhost:3000/hello')
  .then(response => response.text())
  .then(data => {
    // you can see your PromiseValue data here
    console.log(data)
  })