JavaScript Object Descriptors

Introduction

Object descriptors in JavaScript provide detailed control over object properties. Using Object.defineProperty, you can define and modify the behavior of individual properties.

Key Descriptor Properties

Each property descriptor can have the following key-value pairs:

• writable: Determines if the property value can be changed (true or false).
• enumerable: Determines if the property appears during enumeration (true or false).
• configurable: Determines if the property descriptor can be changed or deleted (true or false).
• value: The value of the property.
• get: A function to retrieve the property value.
• set: A function to set the property value.

Example Code

const user = {
    name: "death",
    name2: "death",
    name3: "death",
};
 
// Viewing the property descriptor for 'name'
console.log(Object.getOwnPropertyDescriptor(user, 'name'));
 
// Modifying the 'name' property descriptor
Object.defineProperty(user, 'name', {
    writable: false,
    enumerable: false,
    configurable: false
});
 
// Attempting to change 'name' (won't work due to writable: false)
user.name = "pop";
 
// Viewing the descriptor of Math.PI
console.log(Object.getOwnPropertyDescriptor(Math, 'PI'));
 
// Keys of 'user' (won't include 'name' due to enumerable: false)
console.log(Object.keys(user));
 
// Accessing 'name'
console.log(user.name);
 
// Attempting to modify 'name' descriptor (won't work due to configurable: false)
try {
    Object.defineProperty(user, 'name', {
        configurable: true
    });
} catch (error) {
    console.error("Error modifying 'name' descriptor:", error);
}
 
// Deleting 'name' (won't work due to configurable: false)
delete user.name;
 
console.log(user.name);

Explanation

• The writable property controls whether the value can be changed.
• The enumerable property determines if the property is visible in enumeration methods like Object.keys.
• The configurable property controls if the descriptor can be modified or deleted.

Tips and Tricks

• Use Object.getOwnPropertyDescriptor to inspect property attributes.
• Set enumerable: false for sensitive properties to hide them during enumeration.
• Set writable: false for constants or read-only properties.
• Use configurable: false to lock down critical properties.

Advanced Use Cases

Descriptors can also be used with getters and setters for advanced property control:

Object.defineProperty(user, 'greeting', {
    get: function () {
        return `Hello, ${this.name}`;
    },
    set: function (value) {
        this.name = value;
    }
});
 
console.log(user.greeting); // Outputs: "Hello, death"
user.greeting = "newName";
console.log(user.name); // Outputs: "newName"