How To Avoid Overwriting The Inherited Properties in Objects?

Inherited properties are those that an object acquires from its prototype chain rather than defining them directly. To prevent overwriting these inherited properties, it's important to ensure that any modifications or additions to the object do not accidentally affect properties inherited from its prototypes.

Here are several methods to achieve this

Check for Own Properties Before Assignment

Before assigning a value to a property, verify that the property is an owned property of the object using the hasOwnProperty() method.

const parObj = { inheritedProp: "original value" };
const chObj = Object.create(parObj);

// Attempt to modify 'inheritedProp'
if (chObj.hasOwnProperty('inheritedProp')) {
    chObj.inheritedProp = 'new value';
} else {
    console.log('Cannot overwrite an inherited property.');
}

Cannot overwrite an inherited property.

In this example, childObj inherits inheritedProp from parentObj. The hasOwnProperty() check ensures that inheritedProp is not overwritten in childObj.

Use Object.defineProperty() to Control Property Attributes

Define properties with specific attributes to control their writability and configurability, preventing unintended modifications.

const parObj = {};
Object.defineProperty(parObj, 'inheritedProp', {
    value: 'protected value',
    writable: false, // Prevents modification
    configurable: false, // Prevents deletion or reconfiguration
});

const chObj = Object.create(parObj);
// This assignment will fail silently or throw an error in strict mode
chObj.inheritedProp = 'new value';
console.log(chObj.inheritedProp);

protected value

By setting writable and configurable to false, inheritedProp cannot be modified or deleted in parObj or any of its descendants.

Avoid Property Name Collisions

When adding new properties to an object, choose property names that do not conflict with inherited properties to prevent accidental overwriting.

const parObj = { inheritedProp: 'original value' };
const chObj = Object.create(parObj);

// Adding a new property with a unique name
chObj.ownProp = 'own value';

console.log(chObj.inheritedProp);
console.log(chObj.ownProp); 

original value
own value

By using unique property names, you ensure that inherited properties remain unaffected.

Use Object.create(null) for a Clean Slate

If you need an object without any inherited properties, create it with Object.create(null). This approach provides an object with no prototype, eliminating inherited properties.

const obj = Object.create(null);
obj.newProp = 'value';

console.log(obj.newProp); 
console.log(obj.hasOwnProperty); 

value
undefined

Since obj has no prototype, it doesn't inherit any properties, including hasOwnProperty.

Iterate Over Own Properties Only

When iterating over an object's properties, ensure that only its own properties are considered, excluding inherited ones.

const parObj = { inheritedProp: 'original value' };
const chObj = Object.create(parObj);
chObj.ownProp = 'own value';

for (const key in chObj) {
    if (chObj.hasOwnProperty(key)) {
        console.log(`${key}: ${chObj[key]}`);
    }
}

ownProp: own value

The for...in loop iterates over all enumerable properties, including inherited ones. The hasOwnProperty() check filters out inherited properties, ensuring only own properties are processed.