What is Object.defineProperty in JavaScript?

Object.defineProperty is a method in JavaScript that allows you to define new properties or modify existing properties on an object.

How to use Object.defineProperty?

The Object.defineProperty() method takes three arguments: the object that you want to define or modify the property on, the name of the property, and an object that describes the property that you want to create or modify.

Example:

const obj = {}Object.defineProperty(obj, 'name', {   value: 'John',   writable: false,   enumerable: true,  configurable: false})

In the above example, we define a new property called name on an empty object. The property has a value of 'John', is not writable (meaning it cannot be changed), is enumerable (meaning it can be iterated over with for...in), and is not configurable (meaning it cannot be deleted or have its descriptor modified).

Why use Object.defineProperty?

The main reason to use Object.defineProperty is to create or modify properties with specific behaviors, such as read-only properties or properties that trigger functions when they are accessed or changed.

Read-only Properties:

You can create read-only properties using Object.defineProperty by setting the writable attribute to false. This prevents the property from being changed, which can be useful for properties that should always remain the same, such as constants or configuration settings.

Example:

const obj = {}Object.defineProperty(obj, 'PI', {   value: 3.14159,   writable: false,   enumerable: true,  configurable: false})

In this example, we create a property called PI on an empty object that has a value of 3.14159 and cannot be changed.

Getters and Setters:

Another way to use Object.defineProperty is to create properties that trigger functions when they are accessed or changed. These functions are called getters and setters.

Example:

const obj = {  _firstName: 'John',  _lastName: 'Doe',  get fullName() {    return `${this._firstName} ${this._lastName}`  },  set fullName(value) {    const [first, last] = value.split(' ')    this._firstName = first    this._lastName = last  }}obj.fullName = 'Jane Smith'console.log(obj.fullName) // Jane Smith

In this example, we define an object with two properties called _firstName and _lastName that are not directly accessible from outside the object. We also define a fullName property that is accessible and returns the contents of the _firstName and _lastName properties concatenated together.

We also define a setter for the fullName property that accepts a string value, splits it into two parts (the first and last name), and sets the _firstName and _lastName properties accordingly.

Finally, we set the fullName property to 'Jane Smith' and log the value of the fullName property to the console, which outputs 'Jane Smith'.

Conclusion:

Object.defineProperty is a powerful tool in JavaScript that allows you to create and modify properties with specific behaviors. It is particularly useful for creating read-only properties and properties that trigger functions when they are accessed or changed.