Object Descriptors & Property Flags

How do nested properties behave when the parent object is frozen?

const config = { api: { url: 'https://api.example.com' } };
Object.freeze(config);

config.api.url = 'https://new-api.example.com';
config.newProp = 'test';

console.log(config.api.url);
console.log(config.newProp);

'https://api.example.com', 'test'
'https://new-api.example.com', undefined
The console will log 'https://new-api.example.com' and undefined because: 1) Object.freeze() is shallow - it only freezes the top-level properties, 2) While config can't be modified directly, the object it references at config.api can still be modified, 3) The URL property inside the nested api object was successfully changed, 4) The attempt to add a new top-level property failed silently, resulting in undefined, 5) This demonstrates the limitation of Object.freeze() with nested objects, 6) For deep freezing, you would need to recursively apply Object.freeze() to all nested objects, 7) This behavior is important to understand when using freeze for configuration objects.
'https://api.example.com', undefined
'https://new-api.example.com', 'test'

Next Question (19/40)