Property Flags & Descriptors in JavaScript

In JavaScript, property descriptors give us fine control over object properties' behavior. They let us define attributes like writability, enumerability, and configurability.

🔹 Property Descriptors

Every property in JavaScript has a descriptor with default values:

let user = { name: "Alice" };
console.log(Object.getOwnPropertyDescriptor(user, "name"));

✅ Output:

{
  value: "Alice",
  writable: true,
  enumerable: true,
  configurable: true
}

✔ By default, properties are writable, enumerable, and configurable.

🔹 Modifying Property Attributes

We can change these attributes using Object.defineProperty().

1️⃣ `writable` - Controls Modification

If writable: false, the property cannot be changed.

let user = { name: "Alice" };

Object.defineProperty(user, "name", {
    writable: false
});

user.name = "Bob"; // ❌ No effect, error in strict mode
console.log(user.name); // ✅ Output: Alice

2️⃣ `enumerable` - Controls Visibility in Loops

If enumerable: false, the property won’t appear in loops.

let user = { name: "Alice", age: 25 };

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

console.log(Object.keys(user)); // ✅ Output: ["name"]

✔ age won’t show in Object.keys(), for...in, or JSON.stringify().

3️⃣ `configurable` - Prevents Further Changes

If configurable: false, we can’t delete or modify the descriptor.

let user = { name: "Alice" };

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

// ❌ Cannot redefine or delete:
delete user.name; // No effect
Object.defineProperty(user, "name", { writable: true }); // ❌ Error

🔹 Multiple Property Descriptors

Use Object.defineProperties() to modify multiple properties at once:

let user = { name: "Alice" };

Object.defineProperties(user, {
    name: { writable: false },
    age: { value: 25, enumerable: false }
});

console.log(user); // ✅ Output: { name: "Alice" }
console.log(Object.keys(user)); // ✅ Output: []

🔹 Getters & Setters with Descriptors

We can define getter and setter methods instead of value:

let user = {
    firstName: "Alice",
    lastName: "Smith",

    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    },

    set fullName(value) {
        [this.firstName, this.lastName] = value.split(" ");
    }
};

console.log(user.fullName); // ✅ Output: Alice Smith
user.fullName = "Bob Brown";
console.log(user.firstName); // ✅ Output: Bob

✔ Getters compute values, and setters modify them.

🎯 Summary

✔ writable: false → Prevents changes to a property.
✔ enumerable: false → Hides the property from loops.
✔ configurable: false → Prevents deletion/modification.
✔ Use Object.defineProperty() to set descriptors.
✔ Getters & Setters allow computed properties.

🚀 Mastering property descriptors gives you full control over object properties! Let me know if you need more examples. 😊

Souy Soeng

Property Flags & Descriptors in JavaScript