Creating properties in literal object

Question

var o, d;

o = { get foo() { return 17; } };
d = Object.getOwnPropertyDescriptor(o, "foo");
// d is { configurable: true, enumerable: true, get: /*the getter function*/, set:     undefined }

What does that get within the object do? Is that a method or property or something else? How does it work or how it set property or method to object? Will i fall into trouble if i simply ignore the use of get and set?Are there more advantages in using get and set than simply defining property without there use.What are those advantages if any.Also what will the .getOwnPropertyDescriptor() method returns? If it returns object, can I simply do returnedobj.configurable to access the configurable property-value?

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

The get defines a property accessor function. When the value of the foo property on o is retrieved, that function is called even though it doesn't look like a function call in the code, e.g.:

var a = o.foo; // Note that `foo` doesn't have () after it, it's not a function call

In this case, it always returns 17, but it could do something else instead. For instance, consider a circle:

var circle = {
    radius: 7,
    get circumference() { return 2 * Math.PI * this.radius; },
    get area()          { return Math.PI * this.radius * this.radius; }
};
console.log(circle.circumference); // 43.982297150257104 
console.log(circle.area);          // 153.93804002589985 
circle.radius = 4;
console.log(circle.circumference); // 25.132741228718345
console.log(circle.area);          // 50.26548245743669

As you can see, when we access the two properties we defined with accessors, the functions assigned to them get called, even though the property access doesn't look like a function call.

You can also have functions that get called when the property is set. Unsurprisingly, you do that using set rather than get. :-)

You can read more about this in the object initializers part of the specification, and on MDN.

The Object.getOwnPropertyDescriptor call returns an object that describes the property you asked for (in this case, foo). You can read more about it in the spec and on MDN as well.

Quoting from MDN:

A property descriptor is a record (TJC: e.g., object) with some of the following attributes:

value
The value associated with the property (data descriptors only).
writable
true if and only if the value associated with the property may be changed (data descriptors only).
get
A function which serves as a getter for the property, or undefined if there is no getter (accessor descriptors only).
set
A function which serves as a setter for the property, or undefined if there is no setter (accessor descriptors only).
configurable
true if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.
enumerable
true if and only if this property shows up during enumeration of the properties on the corresponding object.

score 2 · Answer 2 · 2013-04-28T17:07:45.560

2

get is part of the ECMAScript 5 syntax for defining property getters and setters.

Using object literal syntax, it's defined like this:

var obj = {
    __other_property__: null,
    get foo() { return "bar"; },
    set foo(v) { this.__other_property__ = v }
};

This lets you invoke the body of the getter function when doing a get on the property.

obj.foo = "oof";
console.log(obj.foo); // "bar"
console.log(obj.__other_property__); // "oof"

The above uses foo to set a different property __other_property__. This could be a local variable or something else, and the functions can obviously do far more complex operations than I'm showing here.

edited Apr 28 '13 at 17:07

answered Apr 28 '13 at 16:42

@Maizere: Yes, it returns an object with accessible properties. I figured you would find that out once you gave it a try. – Apr 28 '13 at 16:48
i was afraid to try ,anyway thank u again.Also can u help me what "set" does? will the function get called when we set value – Maizere Pathak.Nepal Apr 28 '13 at 16:49
why haven't u use "()" in foo for invoking? – Maizere Pathak.Nepal Apr 28 '13 at 16:51
@Maizere: Don't be afraid... just jump right it and try things! ;-) Yes, with the setter you define a parameter, which is used to set the value. So these getter/setter properties allow more than just simple assignment and retrieval without having to use `()` on a function. – Apr 28 '13 at 16:51
@Maizere: Because it isn't needed. Do some experimentation. I'll update my example object with the setter. – Apr 28 '13 at 16:52

Creating properties in literal object

2 Answers2

Linked