How to Remove a Property From a JavaScript Object?

Deleting an Object Property

Using the delete operator, we can remove a property from an object. Although this has great browser support, beware that this would modify the existing object (i.e. it is mutable). It returns true if the property is successfully deleted, and false if the property can't be deleted. For example:

const obj = { foo: 'bar', baz: 'qux' };

// using the dot notation:
delete obj.baz;

// or, using the square bracket notation:
delete obj['baz'];

console.log(obj); // { foo: 'bar' }

The deleted property is only garbage collected when there are no more references to it being held by other parts of your program.

// ES5+
const descriptor = Object.getOwnPropertyDescriptor(object, 'propertyName');

console.log(descriptor.configurable); // true/false

Excluding Object Properties Using the Rest/Spread Operators

Using the rest and spread operators (introduced in ES6), we can copy the values of the object excluding specific properties/keys. In this way, we do not modify the original object, and work in an immutable way. For example:

// ES6+
const obj = { foo: 'bar', baz: 'qux', waldo: 'fred' };
const { baz, ...rest } = obj;

console.log(rest); // { foo: 'bar', waldo: 'fred' }
console.log(baz); // 'qux'

In the example above, we exclude the property baz from our object. This works because using the rest parameter syntax we only copy the remaining own enumerable property key/value pairs onto a new object (i.e. ones that were not already picked off by the destructuring pattern).

Excluding Dynamic Property From the Object Copy:

In ES6+, we can destructure computed/dynamic property names as well by wrapping the variable with the property key within square brackets like so:

// ES6+
const obj = { foo: 'bar', baz: 'qux', waldo: 'fred' };
const prop = 'baz';
const { [prop]: exclProp, ...newObj } = obj;

console.log(newObj); // { foo: 'bar', waldo: 'fred' }
console.log(exclProp); // 'qux'

When using destructuring assignment with computed/dynamic properties, remember to destructure the dynamic property into a variable by providing a name (like exclProp in our example into which the value of the property baz was destructured).

We can also convert this into a small utility function which returns a copy of the original object with the specified key excluded:

// ES6+
const removePropery = (prop, { [prop]: exclProp, ...rest }) => rest;

const obj = { foo: 'bar', baz: 'qux', waldo: 'fred' };

console.log(removePropery('baz', obj)); // { foo: 'bar', waldo: 'fred' }

Excluding Object Properties Using Array.reduce()

You could also make use of Array.reduce() (introduced in ES5) to exclude specific keys from the object in an immutable way, like so:

// ES5+
const obj = { foo: 'bar', baz: 'qux', waldo: 'fred' };

const newObj = Object.keys(obj).reduce((accumulator, key) => {
    // copy all excluding 'baz'
    if (key !== 'baz') {
        accumulator[key] = obj[key];
    }
    return accumulator;
}, {});

console.log(newObj); // { foo: 'bar', waldo: 'fred' }