2 Ways to Remove a Property from an Object in JavaScript

1. Using the delete keyword

You can remove an object field using a helper function in JavaScript by utilizing the delete keyword. Here's an example:

function removeObjectField(obj, fieldToRemove) {
  if (obj.hasOwnProperty(fieldToRemove)) {
    delete obj[fieldToRemove];
  }
}

// Example usage:
let myObject = { name: 'John', age: 25, city: 'New York' };
removeObjectField(myObject, 'age');
console.log(myObject);

This removeObjectField function checks if the object has the specified field using hasOwnProperty and deletes it with delete if present. Note that modifying objects in this way directly might not be the best practice, depending on your use case. Consider creating a new object without the undesired field if immutability is important in your context.

Using the delete keyword, directly modifies the original object. This can introduce unexpected behaviors, especially if the object is used elsewhere in your code. Modifying objects in place can lead to issues related to mutability, and it might be harder to reason about your code.

2. Using object destructuring

The second method, using object destructuring and the rest operator, is generally considered a better practice in terms of immutability. It creates a new object without modifying the original one. This is often preferred in modern JavaScript development because it helps avoid unexpected side effects and makes your code more predictable.

const removeObjectField1 = (obj, field) => {
  const { [field]: deletedField, ...rest } = obj;
  return rest;
}

This method creates a new object rest without the specified field, leaving the original object (obj) unchanged.

In summary, the first method is generally considered better practice, especially if you want to follow the principle of immutability.