remove
property
object
javascript

How do I remove a property from a JavaScript object?

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

To remove a property from a JavaScript object, use the delete operator. That removes the key from the object itself, which is different from assigning undefined or null and leaving the property in place.

Basic delete Usage

You can delete a property with dot notation or bracket notation. Dot notation is fine for fixed identifiers, while bracket notation is useful for computed property names.

javascript
1const person = {
2  name: "John",
3  age: 30,
4  occupation: "Engineer",
5};
6
7delete person.age;
8delete person["occupation"];
9
10console.log(person);
11console.log("age" in person);

Output:

javascript
{ name: "John" }
false

After deletion, the property is no longer an own property of person.

delete vs Setting to undefined

These operations look similar in logs, but they affect program behavior differently.

javascript
1const obj = { a: 1, b: 2 };
2
3obj.a = undefined;
4delete obj.b;
5
6console.log(obj);
7console.log("a" in obj, "b" in obj);
8console.log(Object.keys(obj));

Output:

javascript
{ a: undefined }
true false
[ 'a' ]

Setting a to undefined keeps the key present. delete obj.b removes the key entirely. That matters when you:

Prototype Behavior

Deleting a property only removes it from the current object. If a property also exists on the prototype chain, deleting the local version may reveal the inherited one.

javascript
1const defaults = { role: "guest" };
2const user = Object.create(defaults);
3
4user.role = "admin";
5console.log(user.role);
6
7delete user.role;
8console.log(user.role);
9console.log(user.hasOwnProperty("role"));

Output:

javascript
admin
guest
false

This surprises people because the property appears to come back. In reality, the own property was removed and lookup fell through to the prototype.

Non-Configurable Properties Cannot Be Deleted

Some properties are defined as non-configurable. Those cannot be removed with delete.

javascript
1const obj = {};
2
3Object.defineProperty(obj, "fixed", {
4  value: 42,
5  configurable: false,
6});
7
8console.log(delete obj.fixed);
9console.log(obj.fixed);

In non-strict mode, delete returns false. In strict mode, attempting to delete a non-configurable property throws an error. If deletion fails, inspect the property descriptor instead of assuming the syntax is wrong.

Arrays Are a Special Case

You can use delete on an array index, but it does not close the gap. It creates a sparse array slot and leaves length unchanged.

javascript
1const values = [10, 20, 30];
2delete values[1];
3
4console.log(values);
5console.log(values.length);
6console.log(1 in values);

Output:

javascript
[ 10, <1 empty item>, 30 ]
3
false

If you want to remove an element and shift later elements left, use splice instead:

javascript
const values = [10, 20, 30];
values.splice(1, 1);
console.log(values);

Immutable-Style Removal

If you want a new object without mutating the original one, destructuring is a clean pattern. This is common in React reducers and other state-management code.

javascript
1const user = { id: 1, name: "Ada", password: "secret" };
2const { password, ...safeUser } = user;
3
4console.log(safeUser);
5console.log(user);

This preserves the original object while producing a filtered copy.

Performance and Shape Considerations

In most application code, using delete occasionally is fine. In hot paths, though, repeatedly adding and deleting properties can change an object's internal shape and make access patterns less predictable for the engine. If you are modeling fixed records, it is often cleaner to create a new object without the field than to mutate the same object many times.

That is not a reason to avoid delete everywhere. It just means delete is best used for actual property removal, not as a generic substitute for assigning an empty value.

Common Pitfalls

The biggest pitfall is assuming delete on an array behaves like list removal. It does not shift indexes; it leaves a hole behind.

Another common mistake is confusing deletion with assigning undefined. If the key should disappear completely, use delete, not a value assignment.

Prototype lookup also trips people up. Deleting an own property can reveal an inherited property with the same name, which can look like the deletion failed.

Finally, if delete returns false or throws in strict mode, the property is probably non-configurable.

Summary

  • Use delete object.property or delete object["property"] to remove an own property from an object.
  • Assigning undefined keeps the key present, while delete removes the key entirely.
  • Deleting an own property can expose a value from the prototype chain.
  • 'delete on arrays leaves holes; use splice when you want the array to shrink.'
  • For immutable code, create a new object without the property instead of mutating the original.

Course illustration
Course illustration

All Rights Reserved.