Object Descriptors and Object.defineProperty() in JavaScript

When working with objects in JavaScript, controlling how properties behave can be crucial for building reliable and maintainable applications. This is where property descriptors and the Object.defineProperty() method come into play.

In this article, we will break down:

1. What are property descriptors?
2. How to use Object.defineProperty()
3. Practical use cases
4. Code examples for all levels

Let’s dive in! ?

What are Property Descriptors?

In JavaScript, every object property has associated attributes that define how the property behaves. These attributes are called **property descriptors**.

Key Property Descriptors

1. configurable: Can the property be redefined or deleted?

- true: The property can be modified or deleted.

- false: It cannot be redefined or deleted.

2. enumerable: Will the property show up during iteration?

- true: The property will appear in loops (`for...in`) and Object.keys().

- false: The property will be hidden from iterations.

3. writable: Can the value of the property be changed?

- true: The property value can be updated.

- false: The value is read-only.

4. value: The current value of the property.

5. get and set: Functions to define custom logic for reading and writing property values.

By default, all properties created with standard object notation are writable, configurable, and enumerable.

Using Object.defineProperty()

The Object.defineProperty() method allows you to define or modify the behavior of a property.

Syntax

Object.defineProperty(obj, propertyName, descriptorObject);        

• obj: The target object
• propertyName: The name of the property to define or modify
• descriptorObject: An object specifying the property descriptors

Example 1: Basic Usage

const person = {};

Object.defineProperty(person, 'name', {
  value: 'Amit',
  writable: true, // Allows value updates
  configurable: true, // Allows redefinition
  enumerable: true // Shows up during iteration
});

console.log(person.name); // Output: Amit        

If you try to update the property when writable is set to false:

person.name = 'Ravi';
console.log(person.name); // Still "Amit" if writable is false        

Understanding Property Descriptor Attributes

1. Configurable

When configurable is set to false, you cannot delete or redefine the property.

Object.defineProperty(person, 'age', {
  value: 25,
  configurable: false
});

// Attempting to delete the property
delete person.age;

console.log(person.age); // Output: 25        

2. Enumerable

When enumerable is set to false, the property won’t show up during object iteration.

Object.defineProperty(person, 'city', {
  value: 'Mumbai',
  enumerable: false
});

console.log(Object.keys(person)); // ['name']        

3. Writable

When writable is set to false, the property value becomes read-only.

Object.defineProperty(person, 'country', {
  value: 'India',
  writable: false
});

person.country = 'USA';

console.log(person.country); // Output: India        

Example 2: Using Getters and Setters

You can use get and set descriptors to control property access.

const product = {};

Object.defineProperty(product, 'price', {
  get() {
    return 'The price is hidden';
  },

  set(value) {
    console.log(`Setting price to ${value}`);
  }

});

console.log(product.price); // Output: The price is hidden

product.price = 500; // Output: Setting price to 500        

Practical Use Cases

1. Immutable Constants

const settings = {};

Object.defineProperty(settings, 'APP_VERSION', {
  value: '1.0.0',
  writable: false
});

console.log(settings.APP_VERSION); // Output: 1.0.0

settings.APP_VERSION = '2.0.0';

console.log(settings.APP_VERSION); // Still 1.0.0        

2. Hiding Sensitive Information

const user = {};

Object.defineProperty(user, 'password', {
  value: 'secret123',
  enumerable: false
});

console.log(Object.keys(user)); // []

console.log(user.password); // secret123        

3. Data Validation with Setters

const account = {};

Object.defineProperty(account, 'balance', {
  set(value) {
    if (value < 0) {
      console.error('Balance cannot be negative!');
    } else {
      console.log(`Balance set to ${value}`);
    }

  }

});

account.balance = -100; // Output: Balance cannot be negative!
account.balance = 500; // Output: Balance set to 500        

Summary

Using Object.defineProperty() and property descriptors, you can:

• Control whether properties are writable, enumerable, and configurable.
• Define custom behavior for property access using getters and setters.
• Build robust and maintainable JavaScript applications.

Mastering these techniques will make your code cleaner, more secure, and adaptable to complex requirements. Happy coding! ??