What is the use of the Object.defineProperty() method in JavaScript?

The Object.defineProperty() method is used to define or modify a property on an object. This method allows you to specify various attributes for the property, such as whether it can be modified, enumerated, or deleted.

Here are the main attributes that can be set:

value: The value of the property.
writable: A Boolean value indicating whether the property can be changed.
enumerable: A Boolean value indicating whether the property can be enumerated.
configurable: A Boolean value indicating whether the property can be deleted or its attributes can be changed.
get: A function to get the value of the property.
set: A function to set the value of the property.

Here’s an example of how you can use Object.defineProperty() to define a new property on an object:

const obj = {};

Object.defineProperty(obj, "name", {
  value: "Alice",
  writable: true,
  enumerable: true,
  configurable: true,
});

console.log(obj.name); // Output: 'Alice'

In this example, we define a new property called name on the obj object and set its value to 'Alice'. We also set the writable, enumerable, and configurable attributes to true.

Let’s break down the attributes we’ve set:

value: We set the value of the name property to 'Alice'.
writable: We set this attribute to true, which means that the name property can be changed.
enumerable: We set this attribute to true, which means that the name property can be enumerated.
configurable: We set this attribute to true, which means that the name property can be deleted or its attributes can be changed.

Now let’s look at an example where we set the get and set attributes:

const obj = {
  firstName: "John",
  lastName: "Doe",
};

Object.defineProperty(obj, "fullName", {
  get() {
    return `${this.firstName} ${this.lastName}`;
  },
  set(value) {
    const [firstName, lastName] = value.split(" ");
    this.firstName = firstName;
    this.lastName = lastName;
  },
});

console.log(obj.fullName); // Output: 'John Doe'

obj.fullName = "Alice Smith";

console.log(obj.firstName); // Output: 'Alice'
console.log(obj.lastName); // Output: 'Smith'
console.log(obj.fullName); // Output: 'Alice Smith'

In this example, we define a new property called fullName on the obj object. We use the get attribute to define a function that returns the full name of the object, which is composed of the firstName and lastName properties. We use the set attribute to define a function that sets the firstName and lastName properties based on a string that is passed in.

Let’s break down the get and set functions:

get: We define a function that returns the full name of the object by concatenating the firstName and lastName properties.
set: We define a function that takes in a string and splits it into the firstName and lastName properties. We then set the firstName and lastName properties accordingly.

When we run the code, we first get the fullName property, which returns 'John Doe'. When we set the fullName property to 'Alice Smith', the set function is triggered. The string is split into 'Alice' and 'Smith', and the firstName and lastName properties are set accordingly. We then log the firstName, lastName, and fullName properties to the console, which output 'Alice', 'Smith', and 'Alice Smith' respectively.

Here’s another example that demonstrates the use of the enumerable attribute:

const obj = {
  name: "Alice",
  age: 30,
  occupation: "Engineer",
};

Object.defineProperty(obj, "age", {
  enumerable: false,
});

for (const key in obj) {
  console.log(key); // Output: 'name', 'occupation'
}

console.log(Object.keys(obj)); // Output: ['name', 'occupation']

In this example, we define a new property called age on the obj object and set its enumerable attribute to false. This means that the age property will not be included when we enumerate the object’s properties using a for...in loop or when we call Object.keys() on the object.

When we run the code, we first use a for...in loop to log the keys of the obj object to the console. We only see the name and occupation properties, as the age property is not enumerable. We then call Object.keys() on the object, which returns an array containing only the name and occupation keys.

Finally, let’s look at an example that demonstrates the use of the configurable attribute:

const obj = {
  name: "Alice",
  age: 30,
};

Object.defineProperty(obj, "name", {
  configurable: false,
});

Object.defineProperty(obj, "name", {
  value: "Bob",
}); // Throws a TypeError

delete obj.name; // Throws a TypeError

In this example, we define a new property called name on the obj object and set its configurable attribute to false. This means that we cannot change the configuration of the name property, and we cannot delete it.

When we attempt to redefine the name property with a new value using Object.defineProperty(), a TypeError is thrown. When we attempt to delete the name property using delete, another TypeError is thrown.