Advanced Object Patterns

Property Descriptors

Peek behind the scenes - see how properties really work!

Find videos you like?

Save to resource drawer for future reference!

What are Property Descriptors?

Think of a property descriptor as a detailed instruction manual for each property! Every object property isn't just a value - it has hidden settings (metadata) that control how it behaves. Property descriptors let you read these settings and understand what you can and can't do with a property.

Why Learn This?

Property descriptors are the foundation of how JavaScript properties work! Understanding them helps you debug weird behavior, create better APIs, and know exactly what's happening under the hood.

📋Two Types of Descriptors

📦

Data Descriptor

For regular properties that store values

value

The actual value stored

writable

Can the value be changed?

⚙️

Accessor Descriptor

For computed properties with get/set

get

Function called when reading

set

Function called when writing

Common to Both Types

👁️enumerable

Shows up in for...in loops and Object.keys()

🔧configurable

Can the descriptor be changed or property be deleted?

Example 1: Reading Property Descriptors

Use Object.getOwnPropertyDescriptor() to see property settings

javascript

code

DarkEditable

const person = {
  name: 'Alice',
  age: 25
};

// Get descriptor for 'name' property
const nameDescriptor = Object.getOwnPropertyDescriptor(person, 'name');

console.log(nameDescriptor);
// {
//   value: 'Alice',
//   writable: true,        // Can be changed
//   enumerable: true,      // Shows in loops
//   configurable: true     // Can be deleted
// }

// Regular properties have all flags set to true by default!

// Now let's check a property defined with defineProperty
Object.defineProperty(person, 'id', {
  value: 12345,
  writable: false
  // Note: enumerable and configurable default to false!
});

const idDescriptor = Object.getOwnPropertyDescriptor(person, 'id');

console.log(idDescriptor);
// {
//   value: 12345,
//   writable: false,       // Can't be changed
//   enumerable: false,     // Hidden from loops
//   configurable: false    // Can't be deleted/modified
// }

// Get ALL descriptors at once
const allDescriptors = Object.getOwnPropertyDescriptors(person);

console.log(allDescriptors);
// {
//   name: { value: 'Alice', writable: true, ... },
//   age: { value: 25, writable: true, ... },
//   id: { value: 12345, writable: false, ... }
// }

Console Output

Click "Run Code" to see output here...

Example 2: Understanding Descriptor Flags

See how each flag affects property behavior

javascript

code

DarkEditable

const product = {};

// Test 1: writable flag
Object.defineProperty(product, 'price', {
  value: 99.99,
  writable: false,      // ❌ Can't change value
  enumerable: true,
  configurable: true
});

console.log(product.price);  // 99.99
product.price = 199.99;      // Fails silently (or error in strict mode)
console.log(product.price);  // Still 99.99 ❌

// Test 2: enumerable flag
Object.defineProperty(product, 'secretKey', {
  value: 'hidden-value',
  writable: true,
  enumerable: false,    // ❌ Hidden from loops!
  configurable: true
});

console.log(Object.keys(product));        // ['price'] (no secretKey!)
console.log(product.secretKey);           // 'hidden-value' (still accessible)

for (let key in product) {
  console.log(key);  // Only logs 'price'
}

// Test 3: configurable flag
Object.defineProperty(product, 'category', {
  value: 'Electronics',
  writable: true,
  enumerable: true,
  configurable: false   // ❌ Can't delete or modify descriptor
});

delete product.category;  // Fails silently
console.log(product.category);  // Still 'Electronics'

// Try to redefine (will throw error!)
try {
  Object.defineProperty(product, 'category', {
    enumerable: false
  });
} catch (error) {
  console.log('Cannot redefine!');  // ❌ TypeError
}

// Summary of what we created:
console.log(Object.getOwnPropertyDescriptors(product));

Console Output

Click "Run Code" to see output here...

Quick Reference Table

Flag	Default (normal)	Default (defineProperty)	Controls
`value`	assigned value	undefined	The property's value
`writable`	true	false	Can change the value?
`enumerable`	true	false	Shows in for...in, keys()?
`configurable`	true	false	Can delete or redefine?
`get`	undefined	undefined	Getter function
`set`	undefined	undefined	Setter function

🔍Key Methods

Object.getOwnPropertyDescriptor(obj, prop)

Get descriptor for a single property

Object.getOwnPropertyDescriptors(obj)

Get all descriptors for all own properties

Object.defineProperty(obj, prop, descriptor)

Define or modify a property with specific descriptor

Object.defineProperties(obj, descriptors)

Define or modify multiple properties at once

Key Takeaways

📋

Metadata

Descriptors are hidden metadata about property behavior

🎛️

4 Main Flags

value, writable, enumerable, configurable

⚡

Two Types

Data descriptors (value) and accessor descriptors (get/set)

🔍

Read Them

Use getOwnPropertyDescriptor() to inspect

Previous Topic

Object Immutability

Object.freeze(), seal(), preventExtensions() for immutability.

Next Topic

Prototype Manipulation

Getting and setting prototypes dynamically.

Ask a Question

Have a question about Property Descriptors? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.