ES6 Proxy to return an iterable array

Question

I need to exercise some code in data mapping functions. For this, I need a proxy that returns an iterable array with one element (itself; an iterable array) when any property is requested. This will activate all loops and property checks in the data mapper layer (not shown here).

Something like this:

p = new Proxy([], {
  get(obj, prop) {
    if(prop === 'length') return obj.length
    if(prop === 'push') return obj.push
    if(p.length === 0) p.push(p)
    return p
  }}
)

This starts off well:

> p.any.length
1

but fails here:

> for(let v of p.any){console.log(v)}
Uncaught TypeError: p.any is not iterable

I need the loop to iterate and console.log one element:

> p.any
Proxy [
  <ref *1> [ Proxy [ [Circular *1], [Object] ] ],
  { get: [Function: get] }
]

Some proxy docs and guides cover the in and object but do not cover the of and array.

Answer 1

The error occurs because the for..of loop will query the proxy object with the @@iterator symbol property, and your code will react by returning p, and not an iterator as is what Array.prototype[Symbol.iterator] returns.

The solution is simple: just like you let the access to length and push let through, also do the same with symbol properties.

Another thing you may consider is to not do p.push(p), but obj.push(p). That way you can ignore a push that is issued by the user, and can perform this action as the first action.

Resulting code:

const p = new Proxy([], {
  get(obj, prop) {
    if (obj.length === 0) obj.push(p);
    if (prop === 'length' || typeof prop === "symbol") return obj[prop];
    return p;
  }}
);

for (let v of p) {
  console.log(v);
}

console.log(p);
console.log(p.any);
console.log(p.any.any);

Maybe you should also let other property accesses pass through, like array methods (forEach, reduce, map, filter,... etc).

Answer 2

Basically with your code you overwrite ALL properties except push and length thus overwriting the iterator also!

To fix that you need to determine whether the requested prop belongs to the array or not.

If it's an existing property of the array or its prototypes use Reflect.get() to get the property's value, if not, return your proxy and add the proxy to the array if needed.

This means all existing properties of all the prototypes would work also!
For example we can check Object.prototype.propertyIsEnumerable.

const p = new Proxy([],{
    get(obj, prop, receiver) {

        // look the prop in the object and its prototypes
        if (prop in obj) {
          return Reflect.get(...arguments);
        }
        
        // the prop not found, return the proxy itself
        obj.length || obj.push(receiver);
        return receiver;
    },
});

// check whether we can call Object.prototype.propertyIsEnumerable 
console.log('Object.prototype.propertyIsEnumerable:', p.propertyIsEnumerable('any'));

console.log('p.any.length:', p.any.length);
console.log('p.any.any:', p.any.any);

console.log('iterating:');

for (let v of p.any) {
    console.log(v);
}