7.3 Property Descriptors

Table of Contents

1. •Introduction
2. •Property Descriptor Types
3. •Getting Property Descriptors
4. •Defining Properties
5. •Configurable Attribute
6. •Enumerable Attribute
7. •Writable Attribute
8. •Accessor Properties
9. •Object Freezing and Sealing
10. •Best Practices

---

Introduction

Every property in JavaScript has more than just a value. Properties have hidden attributes called descriptors that control their behavior.

┌─────────────────────────────────────────────────────────────┐
│                    Property Anatomy                          │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  const obj = { name: "Alice" };                             │
│                                                             │
│  Property "name" has:                                       │
│  ┌───────────────────────────────────────────┐              │
│  │  value: "Alice"      ← The actual value   │              │
│  │  writable: true      ← Can be changed?    │              │
│  │  enumerable: true    ← Appears in loops?  │              │
│  │  configurable: true  ← Can be deleted?    │              │
│  └───────────────────────────────────────────┘              │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Why Property Descriptors Matter:

• •Control whether properties can be modified
• •Hide properties from iteration
• •Prevent property deletion
• •Create computed properties (getters/setters)
• •Implement immutability patterns

---

Property Descriptor Types

There are two types of property descriptors:

┌─────────────────────────────────────────────────────────────────────┐
│                  Two Types of Descriptors                            │
├─────────────────────────────────┬───────────────────────────────────┤
│       Data Descriptor           │      Accessor Descriptor          │
├─────────────────────────────────┼───────────────────────────────────┤
│  {                              │  {                                │
│    value: any,                  │    get: function,                 │
│    writable: boolean,           │    set: function,                 │
│    enumerable: boolean,         │    enumerable: boolean,           │
│    configurable: boolean        │    configurable: boolean          │
│  }                              │  }                                │
├─────────────────────────────────┼───────────────────────────────────┤
│  Stores a value directly        │  Computes value via functions     │
└─────────────────────────────────┴───────────────────────────────────┘

Important: A descriptor cannot be both data and accessor. You cannot have both value/writable AND get/set in the same descriptor.

---

Getting Property Descriptors

Single Property

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

const descriptor = Object.getOwnPropertyDescriptor(person, 'name');
console.log(descriptor);
/*
{
    value: "Alice",
    writable: true,
    enumerable: true,
    configurable: true
}
*/

All Properties

const descriptors = Object.getOwnPropertyDescriptors(person);
console.log(descriptors);
/*
{
    name: {
        value: "Alice",
        writable: true,
        enumerable: true,
        configurable: true
    },
    age: {
        value: 30,
        writable: true,
        enumerable: true,
        configurable: true
    }
}
*/

---

Defining Properties

Object.defineProperty()

const obj = {};

Object.defineProperty(obj, 'id', {
  value: 1,
  writable: false, // Cannot be changed
  enumerable: true, // Shows in loops
  configurable: false, // Cannot be deleted or reconfigured
});

obj.id = 2; // Silently fails (or throws in strict mode)
console.log(obj.id); // 1

Object.defineProperties()

const user = {};

Object.defineProperties(user, {
  id: {
    value: 1,
    writable: false,
    enumerable: true,
    configurable: false,
  },
  name: {
    value: 'Alice',
    writable: true,
    enumerable: true,
    configurable: true,
  },
  _secret: {
    value: 'hidden',
    writable: true,
    enumerable: false, // Won't appear in Object.keys()
    configurable: true,
  },
});

Default Descriptor Values

┌──────────────────────────────────────────────────────────────────┐
│           Default Values When Defining Properties                 │
├────────────────────────┬─────────────────────┬───────────────────┤
│      Attribute         │  Object Literal     │ defineProperty    │
├────────────────────────┼─────────────────────┼───────────────────┤
│  value                 │  as specified       │  undefined        │
│  writable              │  true               │  false            │
│  enumerable            │  true               │  false            │
│  configurable          │  true               │  false            │
├────────────────────────┴─────────────────────┴───────────────────┤
│  ⚠️ defineProperty defaults are restrictive for safety!          │
└──────────────────────────────────────────────────────────────────┘

---

Configurable Attribute

The configurable attribute controls:

• •Whether the property can be deleted
• •Whether descriptor attributes (except writable) can be changed
• •Whether it can be converted between data/accessor property

┌───────────────────────────────────────────────────────────────────┐
│                configurable: true vs false                         │
├───────────────────────────────────────────────────────────────────┤
│                                                                   │
│  configurable: true                configurable: false            │
│  ┌────────────────────┐            ┌────────────────────┐         │
│  │ ✓ Can delete prop  │            │ ✗ Cannot delete    │         │
│  │ ✓ Can change attrs │            │ ✗ Cannot change    │         │
│  │ ✓ Can switch to    │            │   (except writable │         │
│  │   accessor/data    │            │    true → false)   │         │
│  └────────────────────┘            └────────────────────┘         │
│                                                                   │
└───────────────────────────────────────────────────────────────────┘

Example

'use strict';

const obj = {};

Object.defineProperty(obj, 'constant', {
  value: 42,
  writable: false,
  configurable: false,
});

// These all fail in strict mode:
obj.constant = 100; // TypeError: Cannot assign
delete obj.constant; // TypeError: Cannot delete

// Cannot reconfigure:
Object.defineProperty(obj, 'constant', {
  configurable: true,
}); // TypeError: Cannot redefine

---

Enumerable Attribute

The enumerable attribute controls whether a property appears in enumeration methods.

┌───────────────────────────────────────────────────────────────────┐
│               enumerable: true vs false                            │
├───────────────────────────────────────────────────────────────────┤
│                                                                   │
│           Method                true          false               │
│  ─────────────────────────────────────────────────                │
│  for...in loop              ✓ included    ✗ skipped               │
│  Object.keys()              ✓ included    ✗ skipped               │
│  Object.values()            ✓ included    ✗ skipped               │
│  Object.entries()           ✓ included    ✗ skipped               │
│  JSON.stringify()           ✓ included    ✗ skipped               │
│  Object.assign()            ✓ copied      ✗ skipped               │
│  spread { ...obj }          ✓ copied      ✗ skipped               │
│  ─────────────────────────────────────────────────                │
│  Object.getOwnPropertyNames() ✓ included  ✓ included             │
│  Reflect.ownKeys()            ✓ included  ✓ included             │
│                                                                   │
└───────────────────────────────────────────────────────────────────┘

Example

const user = { name: 'Alice' };

Object.defineProperty(user, '_id', {
  value: 12345,
  enumerable: false,
});

console.log(Object.keys(user)); // ["name"]
console.log(user._id); // 12345 (still accessible!)
console.log(JSON.stringify(user)); // {"name":"Alice"}

// Get ALL properties:
console.log(Object.getOwnPropertyNames(user)); // ["name", "_id"]

---

Writable Attribute

The writable attribute controls whether the property's value can be changed.

const config = {};

Object.defineProperty(config, 'VERSION', {
  value: '1.0.0',
  writable: false,
  enumerable: true,
  configurable: false,
});

config.VERSION = '2.0.0'; // Silently fails (throws in strict mode)
console.log(config.VERSION); // "1.0.0"

Writable and Nested Objects

const obj = {};

Object.defineProperty(obj, 'data', {
  value: { x: 1, y: 2 },
  writable: false,
});

// Cannot reassign the property
obj.data = { x: 10 }; // Fails
console.log(obj.data); // { x: 1, y: 2 }

// BUT can modify the nested object!
obj.data.x = 100; // Works!
console.log(obj.data); // { x: 100, y: 2 }

---

Accessor Properties

Accessor properties use get and set functions instead of storing values directly.

┌───────────────────────────────────────────────────────────────────┐
│                    Accessor Properties                             │
├───────────────────────────────────────────────────────────────────┤
│                                                                   │
│  const person = {                                                 │
│    _firstName: "John",                                            │
│    _lastName: "Doe",                                              │
│                                                                   │
│    get fullName() {           ← Called when reading               │
│      return `${this._firstName} ${this._lastName}`;               │
│    },                                                             │
│                                                                   │
│    set fullName(value) {      ← Called when writing               │
│      [this._firstName, this._lastName] = value.split(" ");       │
│    }                                                              │
│  };                                                               │
│                                                                   │
│  console.log(person.fullName);   // "John Doe"                    │
│  person.fullName = "Jane Smith"; // Triggers setter               │
│  console.log(person._firstName); // "Jane"                        │
│                                                                   │
└───────────────────────────────────────────────────────────────────┘

Using defineProperty for Accessors

const circle = {
  _radius: 5,
};

Object.defineProperty(circle, 'radius', {
  get() {
    return this._radius;
  },
  set(value) {
    if (value < 0) {
      throw new Error('Radius cannot be negative');
    }
    this._radius = value;
  },
  enumerable: true,
  configurable: true,
});

Object.defineProperty(circle, 'area', {
  get() {
    return Math.PI * this._radius ** 2;
  },
  enumerable: true,
  configurable: true,
});

console.log(circle.radius); // 5
console.log(circle.area); // 78.54...
circle.radius = 10;
console.log(circle.area); // 314.15...

Read-Only Accessor (Getter Only)

const user = {
  _createdAt: new Date(),
};

Object.defineProperty(user, 'createdAt', {
  get() {
    return this._createdAt.toISOString();
  },
  // No setter = read-only
});

console.log(user.createdAt); // "2024-01-15T..."
user.createdAt = new Date(); // Silently fails (throws in strict mode)

---

Object Freezing and Sealing

JavaScript provides methods to restrict object modification at different levels:

┌─────────────────────────────────────────────────────────────────────┐
│              Object Protection Levels                                │
├────────────────────┬────────────────────┬───────────────────────────┤
│     Method         │    What it Does    │       Check Method        │
├────────────────────┼────────────────────┼───────────────────────────┤
│ Object.freeze()    │ No changes at all  │ Object.isFrozen()         │
│ Object.seal()      │ No add/remove      │ Object.isSealed()         │
│ Object.prevent     │ No new properties  │ Object.isExtensible()     │
│ Extensions()       │                    │ (returns false if prev'd) │
└────────────────────┴────────────────────┴───────────────────────────┘

Comparison Chart

┌─────────────────────────────────────────────────────────────────────┐
│              Capabilities After Protection                           │
├──────────────────────┬─────────────┬───────────┬───────────────────┤
│      Operation       │   freeze()  │  seal()   │ preventExtensions │
├──────────────────────┼─────────────┼───────────┼───────────────────┤
│  Add properties      │     ✗       │    ✗      │        ✗          │
│  Delete properties   │     ✗       │    ✗      │        ✓          │
│  Change values       │     ✗       │    ✓      │        ✓          │
│  Reconfigure props   │     ✗       │    ✗      │        ✓          │
└──────────────────────┴─────────────┴───────────┴───────────────────┘

Examples

// Object.freeze() - Complete immutability
const frozen = Object.freeze({
  name: 'Frozen',
  data: { x: 1 },
});

frozen.name = 'Changed'; // Fails
frozen.new = 'property'; // Fails
delete frozen.name; // Fails
// But nested objects are NOT frozen!
frozen.data.x = 100; // Works!

// Object.seal() - Fixed shape, mutable values
const sealed = Object.seal({
  name: 'Sealed',
  count: 0,
});

sealed.count = 10; // Works
sealed.new = 'property'; // Fails
delete sealed.name; // Fails

// Object.preventExtensions() - No new properties
const limited = Object.preventExtensions({
  name: 'Limited',
});

limited.name = 'Changed'; // Works
limited.new = 'prop'; // Fails
delete limited.name; // Works

Deep Freeze

function deepFreeze(obj) {
  // Get all property names
  const propNames = Object.getOwnPropertyNames(obj);

  // Freeze nested objects first
  for (const name of propNames) {
    const value = obj[name];

    if (value && typeof value === 'object') {
      deepFreeze(value);
    }
  }

  return Object.freeze(obj);
}

const deepFrozen = deepFreeze({
  name: 'Config',
  settings: {
    theme: 'dark',
    nested: {
      value: 42,
    },
  },
});

deepFrozen.settings.theme = 'light'; // Fails
deepFrozen.settings.nested.value = 0; // Fails

---

Best Practices

1. Use Getters for Computed Properties

const rectangle = {
  width: 10,
  height: 5,

  get area() {
    return this.width * this.height;
  },

  get perimeter() {
    return 2 * (this.width + this.height);
  },
};

2. Use Setters for Validation

const product = {
  _price: 0,

  get price() {
    return this._price;
  },

  set price(value) {
    if (typeof value !== 'number' || value < 0) {
      throw new Error('Price must be a positive number');
    }
    this._price = value;
  },
};

3. Make Internal Properties Non-Enumerable

function createUser(name) {
  const user = { name };

  Object.defineProperty(user, '_internalId', {
    value: Math.random().toString(36).substr(2, 9),
    enumerable: false,
    writable: false,
  });

  return user;
}

const user = createUser('Alice');
console.log(Object.keys(user)); // ["name"]
console.log(user._internalId); // Still accessible if needed

4. Create True Constants

const CONFIG = {};

Object.defineProperty(CONFIG, 'API_URL', {
  value: 'https://api.example.com',
  writable: false,
  enumerable: true,
  configurable: false,
});

Object.freeze(CONFIG);

5. Avoid Modifying Built-in Prototypes

// ✗ Don't do this
Object.defineProperty(Array.prototype, 'customMethod', {
  value: function () {},
});

// ✓ Create utility functions instead
const arrayUtils = {
  customMethod(arr) {},
};

---

Common Use Cases

---

Files in This Section

• •README.md - This documentation
• •examples.js - Runnable code examples
• •exercises.js - Practice exercises with solutions

---

Navigation

• •Previous: 7.2 Object Methods
• •Next: 7.4 Object Static Methods
• •Back to Module 7