JS Proxy intercept keys and nested keys doesn't return the fallback value

Question

I have an object that I want to intercept access to any of its properties, and if it does not exists to return a fallback value. I tried the following implementation, but for some reason, I get back a Proxy object instead of the fallback value.

const isObject = obj => typeof obj === 'object';
const hasKey = (obj, key) => key in obj;
const isNullOrUndefined = obj => obj === null || obj === undefined;

const obj = {
  keyOne: ''
};


const returnPropertyOnObject = (target, property) => {
  if (isObject(target[property])) {
    return safe(target[property])
  }

  return target[property];
}

function safe(obj) {
  return new Proxy(obj, {
    get: (target, property) => {

      if (hasKey(target, property) && !isNullOrUndefined(target[property])) {
        returnPropertyOnObject(target, property)
      }

      return new Proxy({}, {
        get: function(target, property) {
          return 'MISSING!!';
        }
      });;
    }
  });
}

const wrap = safe(obj);

console.log(wrap.notExists);
console.log(wrap.notExists.deep.nested.nested);

Moreover, I sometimes get properties like toJSON, or toString inside the Proxy.

What am I missing?

georg · Accepted Answer · 2019-08-29 18:17:34Z

3

Once you return missing from the inner proxy, the chain is broken and the next dot will return bare undefined. You have to return the stub object itself from its get. To provide a default value, override toPrimitive:

undef = new Proxy({}, {
    get(_, prop) {
        // support some standard object methods, feel free to add more
        
        if (prop === Symbol.toPrimitive)
            return () => 'no such thing'
        if (prop === 'toString')
            return () => 'whatever you want'
        if (prop === 'toJSON')
            return () => 'whatever you want'

        // if asked for a custom prop, return itself
        
        return undef;
    }
});


const safe = obj => new Proxy(obj, {
    get(target, property) {
        let v = target[property];

        if (v === null || typeof v === 'undefined')
            return undef;

        if (typeof v === 'object')
            return safe(v);

        return v;
    }
});

const wrap = safe({foo: {bar: 'hey'}});

console.log(wrap.foo.bar + "!");
console.log(wrap.notExists.xx.yy.zz + "!");

Symbol.toPrimitive is a symbol that specifies a function... called to convert an object to a corresponding primitive value.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive

edited Aug 29, 2019 at 18:17

answered Aug 29, 2019 at 17:53

georg

216k57 gold badges324 silver badges401 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

undefined Over a year ago

But how can I return a default value?

undefined Over a year ago

Cool. Can you explain, please?

georg Over a year ago

@undefined: added the doc link. Essentially, it's the same as old-style toString/valueOf thing.

undefined Over a year ago

But why it throws when I try to call toString? wrap.foo.bar.toString()

georg Over a year ago

yep, this is because undef.get returns undef itself for all props, including toString. If you want undef to have standard object methods, you have to include them in get, like we did with Symbol.toPrimitive

|

Collectives™ on Stack Overflow

JS Proxy intercept keys and nested keys doesn't return the fallback value

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related