Advanced Object Patterns

Object.defineProperty()

Fine-grained control over how properties behave!

Find videos you like?

Save to resource drawer for future reference!

What is Object.defineProperty()?

Think of it as a property customizer! While normally you'd just write obj.name = "John", this method lets you add properties with special rules - like "this property can't be changed" or "this property won't show up in loops." It's like adding settings to each property!

Why Use It?

Perfect for creating read-only properties, hidden properties, properties with getters/setters, or properties that can't be deleted. Great for libraries and frameworks!

🎛️Property Descriptor Options

📝

value

The actual value of the property

✏️

writable

Can the value be changed? (true/false)

👁️

enumerable

Shows up in for...in loops? (true/false)

🔧

configurable

Can be deleted or modified? (true/false)

Advanced: Getters & Setters

📥get

Function that runs when property is accessed

📤set

Function that runs when property is set

⚠️ Important

Can't use value/writable with get/set together! Choose one approach: data descriptor (value/writable) or accessor descriptor (get/set).

Example 1: Creating Read-Only Properties

Make properties that can't be changed

javascript

code

DarkEditable

Console Output

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

Example 2: Computed Properties with Getters/Setters

Properties that run code when accessed or changed

javascript

code

DarkEditable

const circle = {
  _radius: 5  // Private-like property (convention: _ prefix)
};

// Define area as a computed property
Object.defineProperty(circle, 'area', {
  get() {
    console.log('Calculating area...');
    return Math.PI * this._radius ** 2;
  },
  enumerable: true,
  configurable: true
});

// Define radius with validation
Object.defineProperty(circle, 'radius', {
  get() {
    return this._radius;
  },
  set(value) {
    if (value < 0) {
      throw new Error('Radius cannot be negative!');
    }
    console.log(`Radius changed to ${value}`);
    this._radius = value;
  },
  enumerable: true,
  configurable: true
});

console.log(circle.area);    // Calculating area... 78.54
console.log(circle.radius);  // 5

circle.radius = 10;          // Radius changed to 10
console.log(circle.area);    // Calculating area... 314.16

// Try invalid value
try {
  circle.radius = -5;        // Throws error!
} catch (error) {
  console.log(error.message); // "Radius cannot be negative!"
}

console.log(circle.radius);  // Still 10 (unchanged)

Console Output

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

Default Descriptor Values

⚠️ Watch Out!

When using Object.defineProperty(), if you don't specify descriptor options, they default to false!

// Without defineProperty:

obj.name = "test" // writable, enumerable, configurable = true

// With defineProperty (no options):

Object.defineProperty(obj, 'name', {value: "test"})

// writable, enumerable, configurable = false ⚠️

Key Takeaways

🎛️

Fine Control

Control writable, enumerable, and configurable behavior

🔒

Read-Only

Set writable: false for constants

👁️

Hidden Props

Set enumerable: false to hide from loops

⚡

Computed

Use get/set for dynamic, computed properties

Previous Topic

Object.create

Creating objects with specific prototype.

Next Topic

Object Immutability

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

Ask a Question

Have a question about Object.defineProperty? 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.

Advanced Object Patterns

Object.defineProperty()

Fine-grained control over how properties behave!

Find videos you like?

Save to resource drawer for future reference!

What is Object.defineProperty()?

Why Use It?

Perfect for creating read-only properties, hidden properties, properties with getters/setters, or properties that can't be deleted. Great for libraries and frameworks!

🎛️Property Descriptor Options

📝

value

The actual value of the property

✏️

writable

Can the value be changed? (true/false)

👁️

enumerable

Shows up in for...in loops? (true/false)

🔧

configurable

Can be deleted or modified? (true/false)

Advanced: Getters & Setters

📥get

Function that runs when property is accessed

📤set

Function that runs when property is set

⚠️ Important

Can't use value/writable with get/set together! Choose one approach: data descriptor (value/writable) or accessor descriptor (get/set).

Example 1: Creating Read-Only Properties

Make properties that can't be changed

javascript

code

DarkEditable

Console Output

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

Example 2: Computed Properties with Getters/Setters

Properties that run code when accessed or changed

javascript

code

DarkEditable

const circle = {
  _radius: 5  // Private-like property (convention: _ prefix)
};

console.log(circle.area);    // Calculating area... 78.54
console.log(circle.radius);  // 5

circle.radius = 10;          // Radius changed to 10
console.log(circle.area);    // Calculating area... 314.16

// Try invalid value
try {
  circle.radius = -5;        // Throws error!
} catch (error) {
  console.log(error.message); // "Radius cannot be negative!"
}

console.log(circle.radius);  // Still 10 (unchanged)

Console Output

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

Default Descriptor Values

⚠️ Watch Out!

When using Object.defineProperty(), if you don't specify descriptor options, they default to false!

// Without defineProperty:

obj.name = "test" // writable, enumerable, configurable = true

// With defineProperty (no options):

Object.defineProperty(obj, 'name', {value: "test"})

// writable, enumerable, configurable = false ⚠️

Key Takeaways

🎛️

Fine Control

Control writable, enumerable, and configurable behavior

🔒

Read-Only

Set writable: false for constants

👁️

Hidden Props

Set enumerable: false to hide from loops

⚡

Computed

Use get/set for dynamic, computed properties

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Object.create

Object Immutability

JavaScript Code Editor

Building Your Learning Module...

Object.defineProperty()

What is Object.defineProperty()?

Why Use It?

value

writable

enumerable

configurable

Advanced: Getters & Setters

⚠️ Important

Example 1: Creating Read-Only Properties

Example 2: Computed Properties with Getters/Setters

⚠️ Watch Out!

Key Takeaways

Fine Control

Read-Only

Hidden Props

Computed

Object.create

Object Immutability

JavaScript Code Editor

Object.defineProperty()

What is Object.defineProperty()?

Why Use It?

value

writable

enumerable

configurable

Advanced: Getters & Setters

⚠️ Important

Example 1: Creating Read-Only Properties

Example 2: Computed Properties with Getters/Setters

⚠️ Watch Out!

Key Takeaways

Fine Control

Read-Only

Hidden Props

Computed