The classic and most direct way to remove a specific property from an Object in JavaScript is to use the delete operator. It completely removes the key-value pair by modifying the object directly, without creating a new copy.

let obj = {
    name: 'David',
    age: 30,
    education: 'Software Engineer'
};

console.log(obj)

// Output: { name: 'David', age: 30, education: 'Software Engineer' }

delete obj.age;

console.log(obj);

// Output: { name: 'David', education: 'Software Engineer' }

In the above program, we removed the “age” property from an object. It permanently removes it.

It returns true for the successful removal.

It can return false when a property can not be deleted.

Removing property from Nested Objects

To remove a deeply nested property from an object, chain delete or use bracket notation for dynamic keys.

const obj = { user: { name: 'Krunal', age: 32, secret: 'hidden' } };

delete obj.user.secret;  // Removes nested 'secret'

console.log(obj);

// Output: { user: { name: 'Alice', age: 30 } }

// Dynamic key (e.g., from variable)
const key = 'secret';

delete obj.user[key];

In this code, we removed a key “secret”, which is a nested property, using the delete operator on obj.user.secret, which is a chaining of properties.

Another way is to create a variable for the key you want to delete dynamically and use bracket notation to target that key for deletion.

Removing multiple properties

The delete operator removes a single property at a time.

To remove multiple properties, you must loop over an array of keys or use the for…in statement.

const obj = { a: 1, b: 2, c: 3 };

const keysToRemove = ['b', 'c'];

keysToRemove.forEach(key => delete obj[key]);

console.log(obj);

// Output: { a: 1 }

Using the forEach() method, we looped over each key in the keysToRemove array and removed the property from the object that matched the key within that object.

Non-existent property

The delete operator returns true even if the property does not exist without throwing any error. It works on both herited and inherited properties.

let obj = { a: 1 };

console.log(delete obj.b);

// Output: true

console.log(obj);

// Output: { a: 1 }

Inherited Properties

The delete operator only removes the own properties of an object.

Inherited properties (from prototype) remain unless you delete them from the prototype object itself.

// Create a parent object
const parent = {
    parentProp: "I am from parent"
};

// Create a child object that inherits from parent
const child = Object.create(parent);

child.childProp = "I am from child";

console.log(child.parentProp);

// Output: "I am from parent" (inherited)

console.log(child.childProp);

// Output: "I am from child" (own property)

// Delete own property
console.log(delete child.childProp);

// Output: true

console.log(child.childProp);

// Output: undefined

// Delete inherited property
console.log(delete child.parentProp);

// Output: true, but only tries to delete from `child`

console.log(child.parentProp);
// Output: "I am from parent" (still available via prototype)

// Actually delete from the prototype
console.log(delete parent.parentProp);
// Output: true

console.log(child.parentProp);
// Output: undefined (no longer inherited)

Non-Configurable Properties

The delete operator cannot delete the non-configurable properties. It returns false for that. It can only delete configurable properties.

let obj = {};

Object.defineProperty(obj, "id", {
    value: 21,
    configurable: false,
});

console.log(delete obj.id);

// Output: false

console.log(obj.id);

// Output: 21

As you can see, it did not delete the “id” property, and we printed its value, which is 21.

Alternate approaches

Approach 1:Using Destructuring with Rest Operator (…)

If you want to avoid directly modifying the original object, you can use destructuring with the rest operator (…) that returns a new object with the specified property removed.

It is suitable for immutability (avoids side effects) and widely used in functional programming.

let employee = { name: "Bob", age: 30, position: "project manager" };

let { position, ...rest } = employee;

console.log(rest)

// Output: { name: 'Bob', age: 30 }

In this code, we created a new object called “rest” with the removed property “position”. The original object “employee” remains the same.

Approach 2: Using Reflect.deleteProperty() (Modern Alternative)

The Reflect.deleteProperty() method is a modern approach that deletes the specified property but returns a strict Boolean value. It returns true for deletion and false if the property is not configurable.

It is more explicit and consistent than the delete operator.

let employee = { name: "Bob", age: 30, position: "project manager" };

Reflect.deleteProperty(employee, "position");

console.log(employee)

// Output: { name: 'Bob', age: 30 }

In the above code, we removed the “position” property from the “employee” object. It directly modified the employee object instead of returning a new one.

That’s all!