← Classes vs Prototypes Shallow vs Deep Copy →

Object Property Descriptors

🔍 What are Property Descriptors?

Property descriptors are metadata that define how properties behave in JavaScript objects. They control whether a property can be changed, deleted, enumerated, or configured.

Property Descriptor Structure

Data Descriptor (for regular properties)

{
  value: any,           // Property value
  writable: boolean,    // Can be changed
  enumerable: boolean,  // Shows in for...in
  configurable: boolean // Can be deleted/reconfigured
}

Accessor Descriptor (for getters/setters)

{
  get: function,        // Getter function
  set: function,        // Setter function
  enumerable: boolean,
  configurable: boolean
}

Note: A descriptor cannot be both data and accessor descriptor. It must be one or the other.

Example 1: Understanding Property Descriptors

JavaScript Editor

// Understanding Property Descriptors

const obj = {
  name: 'John',
  age: 30
};

// Get property descriptor
const nameDescriptor = Object.getOwnPropertyDescriptor(obj, 'name');
console.log('Name descriptor:', nameDescriptor);

// Default descriptor values for normal properties
console.log('\nDefault descriptors:');
console.log('value:', nameDescriptor.value);
console.log('writable:', nameDescriptor.writable); // true
console.log('enumerable:', nameDescriptor.enumerable); // true
console.log('configurable:', nameDescriptor.configurable); // true

// Create property with custom descriptor
Object.defineProperty(obj, 'id', {
  value: 12345,
  writable: false, // Cannot be changed
  enumerable: true, // Shows up in for...in
  configurable: false // Cannot be deleted or reconfigured
});

console.log('\nAfter defineProperty:');
console.log('obj.id:', obj.id);

// Try to change (won't work - writable: false)
obj.id = 99999;
console.log('After trying to change id:', obj.id);

// Try to delete (won't work - configurable: false)
delete obj.id;
console.log('After trying to delete id:', obj.id);

// Enumerable property affects iteration
console.log('\nfor...in loop:');
for (let key in obj) {
  console.log(key); // name, age, id (all enumerable)
}

console.log('\nObject.keys():', Object.keys(obj));
console.log('JSON.stringify():', JSON.stringify(obj));

// Non-enumerable property
Object.defineProperty(obj, 'secret', {
  value: 'hidden value',
  enumerable: false // Won't show in iterations
});

console.log('\nAfter adding non-enumerable property:');
console.log('obj.secret:', obj.secret); // Still accessible
console.log('for...in keys:');
for (let key in obj) {
  console.log(key); // name, age, id (secret is hidden)
}
console.log('Object.keys():', Object.keys(obj));
console.log('obj.hasOwnProperty("secret"):', obj.hasOwnProperty('secret'));

// Get all property descriptors
const allDescriptors = Object.getOwnPropertyDescriptors(obj);
console.log('\nAll descriptors:');
console.log(allDescriptors);

✅ Property Descriptor Flags

writable

If false, the property value cannot be changed.

obj.prop = value will fail silently in non-strict mode.

enumerable

If false, the property doesn't show up in:

for...in loops
Object.keys()
JSON.stringify()

configurable

If false, you cannot:

Delete the property
Change its descriptor
Change its type (data ↔ accessor)

Default Values

When creating properties normally:

writable: true
enumerable: true
configurable: true

Example 2: Advanced Property Descriptor Examples

JavaScript Editor

// Advanced Property Descriptor Examples

// 1. Computed Property with Getter/Setter
const user = {
  firstName: 'John',
  lastName: 'Doe',
  
  // Getter
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  
  // Setter
  set fullName(value) {
    const parts = value.split(' ');
    this.firstName = parts[0] || '';
    this.lastName = parts[1] || '';
  }
};

console.log('Getters and Setters:');
console.log('Initial fullName:', user.fullName);
user.fullName = 'Jane Smith';
console.log('After set fullName:');
console.log('firstName:', user.firstName);
console.log('lastName:', user.lastName);
console.log('fullName:', user.fullName);

// Check descriptor for getter/setter
const fullNameDescriptor = Object.getOwnPropertyDescriptor(user, 'fullName');
console.log('\nfullName descriptor:', fullNameDescriptor);
console.log('has get:', typeof fullNameDescriptor.get === 'function');
console.log('has set:', typeof fullNameDescriptor.set === 'function');

// 2. Define getter/setter using defineProperty
const account = {
  _balance: 1000, // Convention: underscore for "private"
  transactions: []
};

Object.defineProperty(account, 'balance', {
  get: function() {
    return this._balance;
  },
  set: function(value) {
    if (value < 0) {
      throw new Error('Balance cannot be negative');
    }
    
    const oldBalance = this._balance;
    this._balance = value;
    
    // Record transaction
    this.transactions.push({
      type: value > oldBalance ? 'deposit' : 'withdrawal',
      amount: Math.abs(value - oldBalance),
      timestamp: new Date()
    });
  },
  enumerable: true,
  configurable: false
});

console.log('\nAccount with validation:');
console.log('Initial balance:', account.balance);
account.balance = 1500; // Deposit
console.log('After deposit:', account.balance);
console.log('Transactions:', account.transactions);

try {
  account.balance = -100; // Should throw error
} catch (error) {
  console.log('Error:', error.message);
}

// 3. Read-only calculated property
const rectangle = {
  width: 10,
  height: 20
};

Object.defineProperty(rectangle, 'area', {
  get: function() {
    return this.width * this.height;
  },
  // No setter - read only
  enumerable: true
});

console.log('\nRead-only calculated property:');
console.log('Rectangle area:', rectangle.area);
rectangle.width = 15;
console.log('After changing width, area:', rectangle.area);

// Try to set area (won't work - no setter)
rectangle.area = 100;
console.log('After trying to set area:', rectangle.area);

// 4. Property with validation
const temperature = {
  _celsius: 25
};

Object.defineProperty(temperature, 'celsius', {
  get: function() {
    return this._celsius;
  },
  set: function(value) {
    if (value < -273.15) {
      throw new Error('Temperature cannot be below absolute zero');
    }
    this._celsius = value;
  },
  enumerable: true
});

Object.defineProperty(temperature, 'fahrenheit', {
  get: function() {
    return (this.celsius * 9/5) + 32;
  },
  set: function(value) {
    this.celsius = (value - 32) * 5/9;
  },
  enumerable: true
});

console.log('\nTemperature with validation:');
console.log('Celsius:', temperature.celsius);
console.log('Fahrenheit:', temperature.fahrenheit);
temperature.fahrenheit = 77;
console.log('After setting 77°F:');
console.log('Celsius:', temperature.celsius);
console.log('Fahrenheit:', temperature.fahrenheit);

🔧 Common Patterns

Read-only properties: Set writable: false
Hidden properties: Set enumerable: false
Locked properties: Set configurable: false
Computed properties: Use getters without setters
Validation: Use setters with validation logic
Observables: Combine with Proxy or setters

⚠️ Important Notes

Once configurable: false, cannot be made true again
If writable: false, cannot make true if configurable: false
Non-enumerable properties still accessible directly
Use Object.getOwnPropertyNames() to get all properties (including non-enumerable)
Strict mode throws errors on violations

Example 3: Multiple Properties and Object Methods

JavaScript Editor

// Object.defineProperties() - Multiple Properties

const product = {};

Object.defineProperties(product, {
  // Read-write property
  name: {
    value: 'Laptop',
    writable: true,
    enumerable: true,
    configurable: true
  },
  
  // Read-only property
  sku: {
    value: 'LP12345',
    writable: false,
    enumerable: true,
    configurable: false
  },
  
  // Getter/setter with validation
  price: {
    get: function() {
      return this._price || 0;
    },
    set: function(value) {
      if (value < 0) {
        throw new Error('Price cannot be negative');
      }
      this._price = value;
    },
    enumerable: true,
    configurable: true
  },
  
  // Calculated property
  discountedPrice: {
    get: function() {
      const discount = this.discount || 0;
      return this.price * (1 - discount/100);
    },
    enumerable: true,
    configurable: true
  },
  
  // Private property (enumerable: false)
  _internalId: {
    value: Date.now(),
    enumerable: false,
    writable: false,
    configurable: false
  },
  
  // Property with default value
  discount: {
    value: 10,
    writable: true,
    enumerable: true,
    configurable: true
  }
});

console.log('Product with multiple defined properties:');
console.log('Name:', product.name);
console.log('SKU:', product.sku);
console.log('Internal ID:', product._internalId);

product.price = 999;
console.log('Price:', product.price);
console.log('Discount:', product.discount, '%');
console.log('Discounted price:', product.discountedPrice);

// Try to change SKU (writable: false)
product.sku = 'NEW123';
console.log('After trying to change SKU:', product.sku);

// Enumerable properties show up in loops
console.log('\nEnumerable properties:');
for (let key in product) {
  console.log(key); // name, price, discountedPrice, discount (not _internalId)
}

// Get all descriptors
const descriptors = Object.getOwnPropertyDescriptors(product);
console.log('\nAll property descriptors:');
console.log(descriptors);

// Object.seal() - makes all properties non-configurable
Object.seal(product);
console.log('\nAfter Object.seal():');

const sealedDescriptor = Object.getOwnPropertyDescriptor(product, 'name');
console.log('name configurable after seal:', sealedDescriptor.configurable); // false

// Cannot add new properties
product.newProp = 'test';
console.log('Tried to add new property:', product.newProp); // undefined

// Object.freeze() - makes all properties read-only
const frozenProduct = { name: 'Phone', price: 499 };
Object.freeze(frozenProduct);

console.log('\nFrozen product:');
console.log('Can change price?');
frozenProduct.price = 599;
console.log('Price after trying to change:', frozenProduct.price);

// Check if object is frozen/sealed/extensible
console.log('\nObject states:');
console.log('product is sealed:', Object.isSealed(product));
console.log('product is frozen:', Object.isFrozen(product));
console.log('product is extensible:', Object.isExtensible(product));
console.log('frozenProduct is frozen:', Object.isFrozen(frozenProduct));

📊 Object Methods Comparison

Method	Effect on Properties	Can Add Properties	Can Delete Properties	Can Modify Properties
`Object.preventExtensions()`	Prevents new properties	❌ No	✅ Yes	✅ Yes
`Object.seal()`	Prevents add/delete, makes configurable: false	❌ No	❌ No	✅ Yes
`Object.freeze()`	Prevents all changes, makes writable: false	❌ No	❌ No	❌ No
`Object.defineProperty()`	Configure individual property	✅ Yes (if new)	Depends	Depends

Example 4: Practical Use Cases

JavaScript Editor

// Practical Use Cases for Property Descriptors

// 1. Immutable Configuration Object
function createAppConfig() {
  const config = {
    apiUrl: 'https://api.example.com',
    timeout: 5000,
    retries: 3
  };
  
  // Make all properties read-only and non-configurable
  Object.keys(config).forEach(key => {
    Object.defineProperty(config, key, {
      writable: false,
      configurable: false,
      enumerable: true
    });
  });
  
  // Prevent new properties
  Object.seal(config);
  
  return config;
}

const appConfig = createAppConfig();
console.log('Immutable config:');
console.log('API URL:', appConfig.apiUrl);

// Try to modify (won't work)
appConfig.apiUrl = 'https://new-api.example.com';
console.log('After trying to change URL:', appConfig.apiUrl);

// 2. Observable Object (Reactive Programming)
function createObservable(obj, onChange) {
  const handler = {
    get(target, property) {
      return target[property];
    },
    
    set(target, property, value) {
      const oldValue = target[property];
      target[property] = value;
      
      // Notify about change
      if (onChange) {
        onChange(property, oldValue, value);
      }
      
      return true;
    }
  };
  
  return new Proxy(obj, handler);
}

const userProfile = createObservable(
  { name: 'John', age: 30 },
  (property, oldValue, newValue) => {
    console.log(`${property} changed from ${oldValue} to ${newValue}`);
  }
);

console.log('\nObservable object:');
userProfile.name = 'Jane';
userProfile.age = 31;

// 3. Validation Layer
function createValidatedObject(schema, initialData = {}) {
  const obj = { ...initialData };
  
  Object.keys(schema).forEach(key => {
    const { type, required, validator, defaultValue } = schema[key];
    
    Object.defineProperty(obj, key, {
      get: function() {
        return this[`_${key}`];
      },
      set: function(value) {
        // Type checking
        if (required && (value === undefined || value === null)) {
          throw new Error(`${key} is required`);
        }
        
        if (value !== undefined && value !== null && typeof value !== type) {
          throw new Error(`${key} must be a ${type}`);
        }
        
        // Custom validator
        if (validator && !validator(value)) {
          throw new Error(`${key} failed validation`);
        }
        
        this[`_${key}`] = value;
      },
      enumerable: true,
      configurable: false
    });
    
    // Set default value
    if (defaultValue !== undefined && obj[key] === undefined) {
      obj[key] = defaultValue;
    }
  });
  
  return obj;
}

const userSchema = {
  name: { type: 'string', required: true },
  age: { type: 'number', required: true, validator: val => val >= 0 },
  email: { type: 'string', validator: val => val.includes('@') },
  isAdmin: { type: 'boolean', defaultValue: false }
};

console.log('\nValidated object:');
const validatedUser = createValidatedObject(userSchema, {
  name: 'Alice',
  age: 25
});

console.log('Initial user:', validatedUser);
validatedUser.email = 'alice@example.com';
console.log('After setting email:', validatedUser);

try {
  validatedUser.age = -5; // Should fail validation
} catch (error) {
  console.log('Validation error:', error.message);
}

// 4. Property-based Access Control
function createRoleBasedObject(role) {
  const data = {
    publicInfo: 'This is public',
    _privateInfo: 'This is private',
    _adminInfo: 'Admin only'
  };
  
  const obj = {};
  
  // Always public
  Object.defineProperty(obj, 'publicInfo', {
    get: () => data.publicInfo,
    enumerable: true
  });
  
  // Only authenticated users
  if (role === 'user' || role === 'admin') {
    Object.defineProperty(obj, 'privateInfo', {
      get: () => data._privateInfo,
      enumerable: true
    });
  }
  
  // Only admins
  if (role === 'admin') {
    Object.defineProperty(obj, 'adminInfo', {
      get: () => data._adminInfo,
      enumerable: true
    });
    
    Object.defineProperty(obj, 'setPrivateInfo', {
      value: function(newValue) {
        data._privateInfo = newValue;
      },
      enumerable: true
    });
  }
  
  return obj;
}

console.log('\nRole-based access:');
const userObj = createRoleBasedObject('user');
const adminObj = createRoleBasedObject('admin');

console.log('User access:');
console.log('publicInfo:', userObj.publicInfo);
console.log('privateInfo:', userObj.privateInfo);
console.log('adminInfo:', userObj.adminInfo);

console.log('\nAdmin access:');
console.log('publicInfo:', adminObj.publicInfo);
console.log('privateInfo:', adminObj.privateInfo);
console.log('adminInfo:', adminObj.adminInfo);
adminObj.setPrivateInfo('Updated private info');
console.log('After update privateInfo:', adminObj.privateInfo);

🎯 Real-World Applications

1. Configuration Objects

Create immutable configuration objects that cannot be accidentally modified.

2. API Responses

Make certain response fields read-only to prevent client-side modification.

3. Library/Plugin Development

Expose public API while keeping internal properties hidden.

4. Form Validation

Create objects with built-in validation for form data.

5. State Management

Create observable state objects for reactive programming.

6. Security

Hide sensitive data from serialization and iteration.

Example 5: Performance and Best Practices

JavaScript Editor

// Performance Considerations and Best Practices

// Performance Test: Normal vs Defined Properties
console.log('Performance Comparison:\n');

const iterations = 1000000;

// Test 1: Property Access
const normalObj = { value: 42 };
const definedObj = {};
Object.defineProperty(definedObj, 'value', {
  value: 42,
  writable: true,
  enumerable: true,
  configurable: true
});

console.time('Normal property access');
for (let i = 0; i < iterations; i++) {
  const val = normalObj.value;
}
console.timeEnd('Normal property access');

console.time('Defined property access');
for (let i = 0; i < iterations; i++) {
  const val = definedObj.value;
}
console.timeEnd('Defined property access');

// Test 2: Getter/Setter Performance
const getterObj = {};
Object.defineProperty(getterObj, 'value', {
  get: function() {
    return this._value;
  },
  set: function(val) {
    this._value = val;
  },
  enumerable: true
});
getterObj.value = 42;

console.time('Getter property access');
for (let i = 0; i < iterations; i++) {
  const val = getterObj.value;
}
console.timeEnd('Getter property access');

// Test 3: Iteration Performance
const largeNormalObj = {};
const largeDefinedObj = {};

// Create 1000 properties
for (let i = 0; i < 1000; i++) {
  largeNormalObj[`prop${i}`] = i;
  Object.defineProperty(largeDefinedObj, `prop${i}`, {
    value: i,
    writable: true,
    enumerable: true,
    configurable: true
  });
}

console.time('Normal object iteration');
for (let key in largeNormalObj) {
  const val = largeNormalObj[key];
}
console.timeEnd('Normal object iteration');

console.time('Defined object iteration');
for (let key in largeDefinedObj) {
  const val = largeDefinedObj[key];
}
console.timeEnd('Defined object iteration');

// Best Practices

// 1. Use for critical properties only
const config = {
  apiKey: 'secret-key',
  // ... other properties
};

// Only protect sensitive properties
Object.defineProperty(config, 'apiKey', {
  writable: false,
  configurable: false,
  enumerable: false // Hide from JSON.stringify and iterations
});

// 2. Combine with Object.freeze() for immutability
const constants = Object.freeze({
  PI: 3.14159,
  E: 2.71828
});

// 3. Use for computed properties
class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
    
    // Computed property
    Object.defineProperty(this, 'area', {
      get: function() {
        return this.width * this.height;
      },
      enumerable: true
    });
  }
}

const rect = new Rectangle(10, 20);
console.log('\nClass with computed property:');
console.log('Area:', rect.area);

// 4. Avoid in hot code paths
// Property descriptors add overhead - use sparingly in performance-critical code

// 5. Consider using Proxies for advanced use cases
const validatorProxy = new Proxy({}, {
  set(target, property, value) {
    if (property === 'age' && (value < 0 || value > 150)) {
      throw new Error('Invalid age');
    }
    target[property] = value;
    return true;
  }
});

console.log('\nProxy vs Descriptor:');
console.log('Proxies are more flexible but slower');
console.log('Descriptors are faster but less dynamic');

// Memory Considerations
console.log('\nMemory usage comparison:');
console.log('Normal properties: Minimal overhead');
console.log('Property descriptors: Additional metadata storage');
console.log('Getters/setters: Function overhead per property');

// When NOT to use property descriptors:
// 1. Simple data objects
// 2. Performance-critical loops
// 3. When you need dynamic property addition
// 4. When working with JSON serialization heavily

// When TO use property descriptors:
// 1. API/library development
// 2. Configuration objects
// 3. Validation layers
// 4. Reactive programming
// 5. Security-sensitive properties

Exercise: Implement Property Descriptors

JavaScript Editor

// Task 1: Create an immutable configuration object
function createImmutableConfig(config) {
  // Your code here
  // Should return an object where:
  // 1. All properties are read-only
  // 2. No new properties can be added
  // 3. Properties cannot be deleted
  // 4. Non-enumerable properties should stay hidden
}

// Task 2: Create a reactive object
function createReactiveObject(initial, callback) {
  // Your code here
  // Should return an object where:
  // 1. All property changes trigger callback(property, oldValue, newValue)
  // 2. Should work for nested objects (bonus)
  // 3. Should handle property addition/deletion
}

// Task 3: Create a validated model
function createUserModel() {
  // Your code here
  // Should return an object with:
  // 1. name: string, required, min 2 chars
  // 2. age: number, required, between 0-150
  // 3. email: string, must contain @
  // 4. password: string, min 8 chars (should be hidden when enumerating)
  // 5. createdAt: Date, auto-set, read-only
  // 6. updatedAt: Date, auto-updates on any change
}

// Task 4: Property-based permissions
function createFileSystem(permissions) {
  // Your code here
  // Should return an object representing a file system where:
  // 1. Files have: name, content, size, created, modified
  // 2. Based on permissions (read, write, execute), expose different properties
  // 3. read permission: can get content
  // 4. write permission: can set content and update modified date
  // 5. execute permission: can get size
  // 6. All users can see name, created date
}

// Test your implementations
console.log('=== Testing Task 1 ===');
const config = createImmutableConfig({
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  _secretKey: 'abc123' // Should be hidden
});

console.log('Config:', config);
console.log('Trying to modify...');
// config.apiUrl = 'new-url'; // Should fail or be ignored
// config.newProp = 'test';   // Should fail or be ignored
console.log('Config after attempts:', config);

console.log('\n=== Testing Task 2 ===');
const reactive = createReactiveObject(
  { name: 'John', age: 30 },
  (prop, oldVal, newVal) => {
    console.log(`${prop} changed: ${oldVal} -> ${newVal}`);
  }
);

console.log('Setting properties:');
reactive.name = 'Jane';
reactive.age = 31;

console.log('\n=== Testing Task 3 ===');
const user = createUserModel();
user.name = 'Alice';
user.age = 25;
user.email = 'alice@example.com';
user.password = 'secure123';

console.log('User:', user);
console.log('Properties:', Object.keys(user)); // password should not appear
console.log('Created at:', user.createdAt);
// user.createdAt = new Date(); // Should fail

console.log('\n=== Testing Task 4 ===');
const fs = createFileSystem({ read: true, write: true, execute: true });
fs.name = 'document.txt';
fs.content = 'Hello World';

console.log('File:', fs.name);
console.log('Content:', fs.content);
console.log('Size:', fs.size);
console.log('Modified:', fs.modified);

💡 Best Practices Summary

Use property descriptors for intentional design, not just because you can
Prefer Object.freeze() for complete immutability
Use enumerable: false to hide implementation details
Combine with Proxies for advanced reactivity patterns
Avoid in performance-critical code (use sparingly)
Document why properties are configured a certain way
Consider using TypeScript for compile-time property safety
Test descriptor behavior in strict mode

🎯 Interview Questions on Property Descriptors

What are the four property descriptor attributes?
What's the difference between writable: false and configurable: false?
How do getters and setters work with property descriptors?
What happens when you try to modify a non-writable property?
How do Object.freeze(), Object.seal(), and Object.preventExtensions() differ?
How can you make a property completely private (inaccessible)?
What are the performance implications of using property descriptors?
How would you implement observable properties using descriptors?
What's the difference between Object.keys() and Object.getOwnPropertyNames()?
How can property descriptors help with security?

← Classes vs Prototypes Shallow vs Deep Copy →

JavaScript Tutorial

Object Property Descriptors

🔍 What are Property Descriptors?

Property Descriptor Structure

Data Descriptor (for regular properties)

Accessor Descriptor (for getters/setters)

Example 1: Understanding Property Descriptors

✅ Property Descriptor Flags

writable

enumerable

configurable

Default Values

Example 2: Advanced Property Descriptor Examples

🔧 Common Patterns

⚠️ Important Notes

Example 3: Multiple Properties and Object Methods

📊 Object Methods Comparison

Example 4: Practical Use Cases

🎯 Real-World Applications

1. Configuration Objects

2. API Responses

3. Library/Plugin Development

4. Form Validation

5. State Management

6. Security

Example 5: Performance and Best Practices

Exercise: Implement Property Descriptors

💡 Best Practices Summary

🎯 Interview Questions on Property Descriptors

Follow Us

Our Tools

Our Company

Special Tools