how to enumerate/discover getters and setters in javascript?

Question

I am trying to discover the getters and setters on an object in typescript. I've tried Object.entries() and Object.keys() and neither of these return getters and setters. How can I enumerate these?

Edit: Here is some code that shows the problem:

class ThingWithGetter{
  myProperty = 22;
  get myGetter() {return 1;}
}
const thing = new ThingWithGetter()

// Does not show getter
console.log(Object.keys(thing));

// Does not show getter
const descriptors = Object.getOwnPropertyDescriptors(thing);
console.log(Object.keys(descriptors));

// Does not show getter
console.log(Object.entries(thing))

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors — kaya3, Feb 25 '20 at 17:21
That's because you defined the getter on the class, not the object. When I wrote the comment, your question said you wanted to discover them on the object. — kaya3, Feb 25 '20 at 18:03

score 6 · Answer 1 · answered Dec 06 '21 at 18:55

You can enumerate the getter name with this function:

function listGetters (instance) {
  return Object.entries(
    Object.getOwnPropertyDescriptors(
      Reflect.getPrototypeOf(instance)
    )
  )
  .filter(e => typeof e[1].get === 'function' && e[0] !== '__proto__')
  .map(e => e[0]);
}

It will returns an array containing the getters names.

Stuart K · Accepted Answer · 2020-02-25T18:19:04.990

The reason this doesn't work is that the getter is on the class's prototype, which is on the instance's prototype chain, rather than on the instance itself.

To illustrate:

class A {
  get x() { return 1 }
}

aInstance = new A()
// A {}

Object.getOwnPropertyDescriptors(aInstance)
// {}

Object.getOwnPropertyDescriptors(A.prototype)
// { constructor:
//    { value: [Function: A],
//      writable: true,
//      enumerable: false,
//      configurable: true },
//   x:
//    { get: [Function: get x],
//      set: undefined,
//      enumerable: false,
//      configurable: true } }

Object.getOwnPropertyDescriptors(Object.getPrototypeOf(aInstance))
// { constructor:
//    { value: [Function: A],
//      writable: true,
//      enumerable: false,
//      configurable: true },
//   x:
//    { get: [Function: get x],
//      set: undefined,
//      enumerable: false,
//      configurable: true } }

There a few good blog posts by Axel Rauschmayer on this topic:

Note that if you are trying to enumerate all the properties, accessors, and methods on an object you will need to recursively walk the prototype chain until an object has a null prototype.

score 4 · Answer 3 · answered Feb 25 '20 at 18:17

The function Object.getOwnPropertyDescriptors is in the ECMAScript latest draft specification, but is implemented in popular browsers. It returns the property descriptors belonging to an object.

Your use-case is a bit more difficult because the getter is defined on the class, not the object itself. So, you need to walk the prototype chain and build it that way. It's not enough to look at just the object's prototype, because the getter could be inherited from any superclass of the object's class.

Here's a recursive function which does it:

function getAllPropertyDescriptors(obj) {
    if (!obj) {
        return Object.create(null);
    } else {
        const proto = Object.getPrototypeOf(obj);
        return {
            ...getAllPropertyDescriptors(proto),
            ...Object.getOwnPropertyDescriptors(obj)
        };
    }
}

The output for JSON.stringify(getAllPropertyDescriptors(thing)) is below. myGetter is the third property descriptor; the actual output if you don't JSON.stringify it also includes references to the actual functions, so you can see if they have get/set properties.

{
  "myProperty": {"value": 22, "writable": true, "enumerable": true, "configurable": true},
  "constructor": {"writable": true, "enumerable": false, "configurable": true},
  "myGetter": {"enumerable": false, "configurable": true},
  "__defineGetter__": {"writable": true, "enumerable": false, "configurable": true},
  "__defineSetter__": {"writable": true, "enumerable": false, "configurable": true},
  "hasOwnProperty": {"writable": true, "enumerable": false, "configurable": true},
  "__lookupGetter__": {"writable": true, "enumerable": false, "configurable": true},
  "__lookupSetter__": {"writable": true, "enumerable": false, "configurable": true},
  "isPrototypeOf": {"writable": true, "enumerable": false, "configurable": true},
  "propertyIsEnumerable": {"writable": true, "enumerable": false, "configurable": true},
  "toString": {"writable": true, "enumerable": false, "configurable": true},
  "valueOf": {"writable": true, "enumerable": false, "configurable": true},
  "__proto__": {"enumerable": false, "configurable": true},
  "toLocaleString": {"writable": true, "enumerable": false, "configurable": true}
}

You could convert this into an iterative version, but that's probably unnecessary since most prototype chains are short, and the iterative version would need some wrangling to get overrides in the right order.

Muhammad Zeeshan · Answer 4 · 2020-02-25T17:55:05.123

0

You can try something like:

var obj = {
  get foo() {
    return Math.random() > 0.5 ? 'foo' : 'bar';
  }
};

Object.keys(obj).forEach(key => {
  console.log("Getter:", Object.getOwnPropertyDescriptor(obj, key).get);
  console.log("Setter: ", Object.getOwnPropertyDescriptor(obj, key).set);
})

Hope this works for you.

edited Feb 25 '20 at 17:55

answered Feb 25 '20 at 17:48

Muhammad Zeeshan

4,608
4
15
41

That won't work, because I don't know the name of the getter beforhand. – Eric Jorgensen Feb 25 '20 at 17:51
as per https://mdn.io/getOwnPropertyDescriptors getOwnPropertyDescriptors only takes 1 parameter of obj, so this code doesn't work in many ways. – Brandon Nozaki Miller Feb 25 '21 at 04:17

how to enumerate/discover getters and setters in javascript?

4 Answers4

Linked