How to delete a property from an object?

Brief Answer

Deleting a property from an object in JavaScript can be done in several ways, each with its own features and use cases. Main methods: [delete] operator, destructuring with rest parameters, and functional approaches creating new objects.

Main deletion methods:

• Delete operator — direct property removal
• Destructuring — creating new object without specific property
• Object.assign/Object spread — functional approach to removal
• Difference between delete and assigning undefined — important nuances

Full Answer

Deleting properties from objects is a common operation in JavaScript, requiring understanding of different approaches and their features. Method choice depends on data mutability requirements and usage context.

Main Deletion Methods

1. Delete Operator

Directly removes property from object:

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

2. Destructuring with Rest Parameters

Creates new object without specified property:

const { b, ...rest } = obj; // rest doesn't contain property b

Approach Differences

1. Mutating vs Non-mutating

// Mutating approach
delete obj.property;
 
// Non-mutating approach
const { property, ...newObj } = obj;

2. Deletion vs Assigning Undefined

const obj = { a: 1, b: 2 };
 
// Property deletion
delete obj.b;
console.log('b' in obj); // false
 
// Assigning undefined
obj.b = undefined;
console.log('b' in obj); // true

Practical Examples

Removing Multiple Properties

const user = {
  name: 'John',
  age: 30,
  password: '12345',
  email: 'john@example.com'
};
 
// Removing one property
delete user.password;
 
// Removing multiple properties via destructuring
const { password, age, ...safeUser } = user;

Conditional Deletion

function removeProperty(obj, key) {
  if (key in obj) {
    delete obj[key];
    return true;
  }
  return false;
}

Common Mistakes

1. Attempting to Delete Non-existent Properties

// ❌ No existence check
delete obj.nonExistent; // Returns true, but does nothing
 
// ✅ Check before deletion
if ('property' in obj) {
  delete obj.property;
}

2. Deleting Properties from Prototype

// ❌ Deleting inherited properties
const obj = Object.create({ inherited: 'value' });
delete obj.inherited; // Won't delete property from prototype
 
// ✅ Check property source
if (obj.hasOwnProperty('inherited')) {
  delete obj.inherited;
}

Best Practices

1. Use destructuring for non-mutating approach — when original object needs to be preserved
2. Apply delete for mutating approach — when original object modification is acceptable
3. Check property existence — before deletion attempt
4. Distinguish deletion from assigning undefined — these are different operations
5. Avoid deleting properties in loops — may affect performance

Compatibility

All property deletion methods are supported by all modern browsers:

• Delete operator — supported since first JavaScript versions
• Destructuring — ES6, modern browsers
• Object.assign — ES6, wide support
• Spread operator — ES9, modern browsers

Key Method Features

1. Mutability — delete modifies original object, destructuring creates new one
2. Return value — delete returns boolean, destructuring returns new object
3. Performance — delete can be slower with frequent usage
4. Prototype handling — delete doesn’t remove properties from prototype chain
5. Enumerable properties — delete works only with enumerable properties

The correct deletion method choice depends on data mutability requirements, performance, and supported browsers.

Want more articles to prepare for interviews? Subscribe to EasyAdvice, bookmark the site and improve yourself every day 💪