How to control property enumeration (for...in) with Proxy objects?

Question

I'm wrapping an object in a Proxy and then iterate through it. How can I control the keys it iterates through?

The proxy works if I don't override the keys:

var obj = {"hello": "world"}
var proxy = new Proxy(obj, {})
for (var key in proxy){
    console.log(key)
}
// logs "Hello"

However, nothing is logged if I change the keys in the ownKeys handler.

var obj = {"hello": "world"}
var proxy = new Proxy(obj, {
    ownKeys: function(){
        return ["a", "b"]
    }
})
for (var key in proxy){
    console.log(key)
}
// Logs nothing

If I return "hello" as part of the ownKeys only "hello" is logged.

Apparently there was an enumerate trap in ES6, but it has been removed from ES7.

Is it still possible to control the for...in loop with a Proxy? Why was enumerate removed from the spec?

Answer 1

Unfortunately, it isn't possible to do this anymore.

As Brian Terlson (the editor of the EcmaScript Specification) wrote:

issue with proxy enumerate trap and for-in, where iimplementations are prevented from pre-populating the list of keys in the object, because the iterator causes observable affects. Which means the iterate must be pulled for every iteration. Last meeting we thought it would be ok if the enumerate trap exhausts the iterator, we thought that would solve the problem. The issue was, now their is an observable difference between an object and proxy of that object, mainly due to delete.

(Source: https://github.com/rwaldron/tc39-notes/blob/master/es7/2016-01/2016-01-28.md#5xix-proxy-enumerate---revisit-decision-to-exhaust-iterator via https://ecmascript-daily.github.io/2016/02/10/why-remove-enumerate-and-reflect-enumerate)

So it was removed due to technical challenges that could not be solved in a satisfactory manner.

has proxy trap

The in operator as such can still be captured using the has proxy trap:

var p = new Proxy({}, {
  has: function(target, prop) {
    if (prop === 'a') { return true; }
    return false;
  }
});
'a' in p; // true
'b' in p; // false

Alternative

As for (let key in proxy) loops are more of a legacy feature these days, you could use one of the following with the ownKeys proxy trap:

• Object.keys() (own enumerable properties only)
• Object.getOwnPropertyNames() (own properties)
• Reflect.ownKeys() (own properties and Symbols)

(Source: https://twitter.com/nilssolanki/status/659839340592422912)

(but you probably already knew that, seeing that you are working with proxies in the first place)

Answer 2

User user2106769 suggestion and yeerk's answer of overriding the getOwnPropertyDescriptor to allow enumeration of Proxy attributes has a flaw that one should be aware of when using it, it doesn't set the value attribute when trapping getOwnPropertyDescriptor, thus some other code that depends on that behavior will not function correctly.

The code demonstrating the flaw and the solution to it is below:

var obj = { "hello": "world" };
var flawedProxy = new Proxy(obj, {
    ownKeys: function() {
        return ["a", "b"];
    },
    getOwnPropertyDescriptor: function(target, key) {
         return { enumerable: true, configurable: true };
    }
});

var goodProxy = new Proxy(obj, {
    get: function(target, key) {
      // modify something here if you want to
      return target[key];
    },
    ownKeys: function() {
        return ["a", "b"];
    },
    getOwnPropertyDescriptor: function(target, key) {
         return { value: this.get(target, key), enumerable: true, configurable: true };
    }
});

// value is accessible, getOwnPropertyDescriptor not trapped
console.log(Object.getOwnPropertyDescriptor(obj, 'hello').value);

// value is undefined, getOwnPropertyDescriptor not trapped correctly
console.log(Object.getOwnPropertyDescriptor(flawedProxy, 'hello').value);

// value is accessible, getOwnPropertyDescriptor trapped correctly
console.log(Object.getOwnPropertyDescriptor(goodProxy, 'hello').value);