Javascript Object.defineProperties()

The Object.defineProperties() method adds or modifies properties on an object and returns the object.

Example


defineProperties() Syntax

The syntax of the defineProperties() method is:

Object.defineProperties(obj, props)

Here, defineProperties() is a static method. Hence, we need to access the method using the class name, Object.


defineProperties() Parameters

The defineProperties() method takes in:

  • obj - the object on which to define or modify properties.
  • props - objects whose keys represent the names of the properties to be defined or modified, and whose values are objects describing those properties.

defineProperties() Return Value

The defineProperties() method returns the object that was passed as an argument i.e. obj.

Note: If a descriptor doesn't contain any of the value, writable, get and set keys, then it is treated as a data descriptor. An exception is thrown if a descriptor has both value or writable and get or set keys.


Example 1: JavaScript Object.defineProperties()

Output

Clint
36

In this example, we have used Object.defineProperties() to add the name and age properties to obj1. The properties are defined with specific values and with their writable attributes set to true.

The output indicates that name and age have been added to obj1 successfully.


defineProperties() Props Values

Before proceeding further, let's first discuss the possible values the props parameters can have.

Each property value must either be a data descriptor or an accessor descriptor. They can have the following optional properties:

  • configurable - the ability to change or delete a property's attributes
  • enumerable - the property that is visible in for...in loops and with Object.keys().

Data descriptors can also have:

  • value - the actual data stored in a property, accessible through its key.
  • writable - the ability to change the value of a property. If false, the property's value cannot be changed.

Accessor descriptors can also have:

  • get - a function that returns the property's value.
  • set - a function that sets the property's value.

Example 2: defineProperties() With Data Descriptors

Output

Original Properties:
id: 711
email: hello@test.com

Changed Properties:
id: 711
email: world@test.com

In the above example, we first created an empty object obj.

Then, we used Object.defineProperties to add two properties to obj: id and email. For each property, we defined its value and whether it's writable or not.

Later, we tried to see how the writable data descriptor works.

// attempt to rewrite unwritable property id
obj.id = 358;
console.log(obj.id); // 711

However, the writable data descriptor of id has been set to false. So, we are unable to rewrite the id property.

We then tried to modify the email property.

// attempt to rewrite writable property email
obj.email = "world@test.com";
console.log(obj.email);

We are able to rewrite the email property because its data descriptor writable was set to true.


Example 3: defineProperties() With Access Descriptors

In the above example, we have defined two properties, prop1 and prop2, on the obj object using Object.defineProperties(). Both properties have the following access descriptors:

  • set - a method that allows us to set the value of the property
  • get - a method that allows us to retrieve the value of the property

Recommended Reading: