Advanced Object Patterns

Object Immutability

Lock down objects - freeze, seal, and prevent changes!

Find videos you like?

Save to resource drawer for future reference!

What is Object Immutability?

Imagine you have a vault with different security levels! JavaScript gives you three methods to protect objects from changes:freeze() (complete lockdown),seal() (can't add/remove, but can modify), andpreventExtensions() (can't add new properties).

Why Use Immutability?

Perfect for configuration objects, constants, or when you want to ensure data doesn't accidentally change. Helps prevent bugs and makes code more predictable!

🔒Three Levels of Protection

❄️

freeze()

Complete lockdown!

❌ Can't add properties
❌ Can't remove properties
❌ Can't modify values
❌ Can't change descriptors

🔐

seal()

Partial lock!

❌ Can't add properties
❌ Can't remove properties
✅ Can modify values
❌ Can't change descriptors

🚪

preventExtensions()

Block new entries!

❌ Can't add properties
✅ Can remove properties
✅ Can modify values
✅ Can change descriptors

Check Status Methods

Object.isFrozen(obj)

Check if frozen

Object.isSealed(obj)

Check if sealed

Object.isExtensible(obj)

Check if extensible

Example 1: Understanding freeze(), seal(), preventExtensions()

See the differences between the three methods

javascript

code

DarkEditable

// 1. FREEZE - Complete lockdown
const frozenUser = Object.freeze({
  name: 'Alice',
  age: 25
});

frozenUser.name = 'Bob';           // ❌ Fails silently
frozenUser.email = 'alice@ex.com'; // ❌ Can't add
delete frozenUser.age;             // ❌ Can't delete

console.log(frozenUser);  // { name: 'Alice', age: 25 } (unchanged!)
console.log(Object.isFrozen(frozenUser));  // true

// 2. SEAL - Can modify, but not add/remove
const sealedUser = Object.seal({
  name: 'Charlie',
  age: 30
});

sealedUser.name = 'David';         // ✅ Works! Can modify
sealedUser.email = 'c@ex.com';     // ❌ Can't add
delete sealedUser.age;             // ❌ Can't delete

console.log(sealedUser);  // { name: 'David', age: 30 }
console.log(Object.isSealed(sealedUser));  // true

// 3. PREVENT EXTENSIONS - Only blocks adding
const limitedUser = Object.preventExtensions({
  name: 'Eve',
  age: 28
});

limitedUser.name = 'Frank';        // ✅ Can modify
limitedUser.email = 'e@ex.com';    // ❌ Can't add
delete limitedUser.age;            // ✅ Can delete!

console.log(limitedUser);  // { name: 'Frank' }
console.log(Object.isExtensible(limitedUser));  // false

Console Output

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

Example 2: Real-World Use Case - Configuration Object

Protect app configuration from accidental changes

javascript

code

DarkEditable

// Application configuration
const appConfig = {
  API_URL: 'https://api.example.com',
  API_KEY: 'secret-key-123',
  MAX_RETRIES: 3,
  TIMEOUT: 5000,
  features: {
    darkMode: true,
    notifications: true
  }
};

// Freeze to prevent any modifications
Object.freeze(appConfig);

// ⚠️ Note: freeze is shallow!
// Top-level is frozen, but nested objects are not
appConfig.API_URL = 'https://hacker.com';  // ❌ Fails
appConfig.NEW_SETTING = 'test';            // ❌ Fails

console.log(appConfig.API_URL);  // Still: 'https://api.example.com'

// But nested objects can still be modified! 😱
appConfig.features.darkMode = false;  // ✅ This works!

console.log(appConfig.features.darkMode);  // false

// Solution: Deep freeze function
function deepFreeze(obj) {
  // Freeze the object itself
  Object.freeze(obj);
  
  // Freeze all nested objects
  Object.keys(obj).forEach(key => {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      deepFreeze(obj[key]);
    }
  });
  
  return obj;
}

// Create deeply frozen config
const secureConfig = deepFreeze({
  API_URL: 'https://api.example.com',
  features: {
    darkMode: true,
    notifications: true
  }
});

// Now everything is protected!
secureConfig.features.darkMode = false;  // ❌ Fails
console.log(secureConfig.features.darkMode);  // Still: true

Console Output

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

Comparison Chart

Action	freeze()	seal()	preventExtensions()
Add properties	❌	❌	❌
Remove properties	❌	❌	✅
Modify values	❌	✅	✅
Change descriptors	❌	❌	✅

⚠️Important Gotchas

1. Shallow Only!

All three methods are shallow - they only protect the immediate properties. Nested objects can still be modified unless you deep freeze them!

2. No Undo!

Once frozen or sealed, you can't undo it! The object is permanently locked. Be absolutely sure before applying these methods.

3. Silent Failures!

In non-strict mode, violations fail silently (no error). Use 'use strict' to get proper errors!

Key Takeaways

❄️

freeze()

Complete immutability - nothing can be changed

🔐

seal()

Can modify values, but can't add/remove properties

🚪

preventExtensions()

Only blocks adding new properties

⚠️

Shallow Only

Nested objects need to be frozen separately

Previous Topic

Object.defineProperty

Fine-grained control over object properties.

Next Topic

Property Descriptors

Configurable, enumerable, writable, and value descriptors.

Ask a Question

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

Lock down objects - freeze, seal, and prevent changes!

Find videos you like?

Save to resource drawer for future reference!

What is Object Immutability?

Why Use Immutability?

Perfect for configuration objects, constants, or when you want to ensure data doesn't accidentally change. Helps prevent bugs and makes code more predictable!

🔒Three Levels of Protection

❄️

freeze()

Complete lockdown!

❌ Can't add properties
❌ Can't remove properties
❌ Can't modify values
❌ Can't change descriptors

🔐

seal()

Partial lock!

❌ Can't add properties
❌ Can't remove properties
✅ Can modify values
❌ Can't change descriptors

🚪

preventExtensions()

Block new entries!

❌ Can't add properties
✅ Can remove properties
✅ Can modify values
✅ Can change descriptors