Javascript Object.defineProperty()

let obj = {};

// define a single property of obj object
Object.defineProperty(obj, "property1", {
  value: 789,
  writable: true,
  enumerable: true,
  configurable: true,
});

console.log(obj.property1); 

// Output: 789

defineProperty() Syntax

The syntax of the defineProperty() method is:

Object.defineProperty(obj, prop, descriptor)

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

defineProperty() Parameters

The defineProperty() method takes in:

• obj - the object on which to define the property.
• prop - the name or Symbol of the property to be defined or modified.
• descriptor - the descriptor for the property being defined or modified.

defineProperty() Return Value

The defineProperty() method returns the object that was passed to the function i.e. obj.

Example 1: JavaScript Object.defineProperty()

// create an object named user
let user = {};

// define the name property of the user object 
Object.defineProperty(user, "name", {
  value: "John",
  writable: false
});

// attempt to change the name property
// change will fail silently
user.name = "John Doe";
console.log(user.name)

// Output: John

In this example, Object.defineProperty() is used to add the name property to the user object. The property is defined with a specific value ("John") and with its writable attribute set to false.

Then, we tried to change the value of the name property to "John Doe".

user.name = "John Doe";
console.log(user.name)

As you can see from the output, we failed to change the value of name. This is because we have set the writable attribute to false.

defineProperties() Prop and Descriptor Values

Before proceeding further, let's first discuss the possible values the prop and descriptor 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: defineProperty() With Data Descriptors

let obj = {};

// define object's property with data descriptors
Object.defineProperty(obj, "id", {
  value: 711,
  writable: true,
  enumerable: true,
  configurable: true,
});

console.log(obj.id); 

// Output: 711

In this example, Object.defineProperty() is used to add the id property to the obj object.

The property is defined with a specific value (711) and with its writable, enumerable and configurable attributes set to true.

Example 3: defineProperty() With Access Descriptors

let obj = {};

// define object's property  with access descriptors
Object.defineProperty(obj, "name", {
  get() {
    console.log("Getting Value...");
    return val;
  },
  set(newVal) {
    console.log("Setting Value...");
    val = newVal;
  },
  enumerable: true,
  configurable: true,
});

obj.name = 'Bart'; 

console.log(obj.name); 

Output

Setting Value...
Getting Value...
Bart

In the above example, we have defined the name property on obj using Object.defineProperty() 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:

• Javascript Object.defineProperties()