3 Ways to Remove a Property from a JavaScript Object

The easiest way to remove a property from an object in JavaScript is by using the delete operator.

delete objectName.propertyName;

For example, if you have an object called person with a property age, you can remove the age like this:

delete person.age;

After you run this code, the person object will no longer have an age property. Note that this will only remove the property from the object; it will not affect other objects that reference the same property.

You can also use the square-brackets accessing operator to remove an object property:

delete obj[prop];

This guide shows you the most common ways to remove properties from objects. If the above answer is enough, feel free to stop reading. But to explore JavaScript and learn useful methods and features, I recommend you keep reading the post. At the end of this guide, you will learn how to prevent a property from being deleted too!

Let’s jump into it!

1. The ‘delete’ Operator

In JavaScript, the delete operator deletes a property from an object. More specifically, it removes the property and its value and returns true if the property was successfully deleted.

For example:

// Define an object with some properties
var myObject = {
  property1: "Hello",
  property2: "World"
};

// Delete the property2 property from the object
delete myObject.property2;

// Print the object to see the result
console.log(myObject);

Output:

{ property1: 'Hello' }

Here the delete operator deletes property2 from the myObject. After the delete operator is completed, the object will no longer have the property2 property and its value will be undefined.

Notice that another way to remove a property with the delete operator is by using the square brackets to access the property.

For example, let’s repeat the above example but use myObject['property2'] instead of myObject.property2.

var myObject = {
  property1: "Hello",
  property2: "World"
};

// Delete the property2 property from the object
delete myObject['property2'];

console.log(myObject);

2. The … Operator

Another popular JavaScript operator you may be familiar with is called the spread operator or the “three-dots” operator (...).

In a sense, you can use this operator to remove a property from an object. In reality, it just creates a new object that lacks the property you ‘deleted’.

So to remove a property from an object using the spread operator, create a new object that contains all of the properties of the original object except for the property you want to remove.

For instance, let’s remove the prop2 from an object with three properties:

const obj = {
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3'
};

// Create a new object with all of the properties of `obj` except `prop2`
const newObj = { ...obj, prop2: undefined };

console.log(newObj); // Output: { prop1: 'value1', prop3: 'value3' }

In this code:

1. You create an object obj that has three properties: prop1, prop2, and prop3.
2. You then create a new object called newObj that contains all of the properties of obj except prop2.

The latter step happens by using the spread syntax (...obj). When used this way, it simply re-creates a new object that includes all the original properties of obj. Then you set the prop2 to undefined in the new object which effectively removes it from the newly created object.

Notice that this method only creates a new object with the properties you want. It does not modify the original object. To truly remove a property from an object such that you modify the original object, use the delete operator:

const obj = {
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3'
};

// Remove the `prop2` property from `obj`
delete obj.prop2;

console.log(obj); // Output: { prop1: 'value1', prop3: 'value3' }

3. Reflect.deleteProperty() Method

The Reflect object in JavaScript is a built-in object that provides methods for interceptable JavaScript operations. It is similar to Proxy, but it does not allow you to define custom behavior for individual operations.

To delete a property from an object using the Reflect.deleteProperty() method, you can use the following syntax:

Reflect.deleteProperty(object, propertyName);

Here, object is the object from which you want to delete the property, and propertyName is a string that specifies the name of the property to delete. This method returns true if the property was successfully deleted, or false if the property could not be deleted (for example, if it is non-configurable).

Here is an example of how you can use this method to delete a property from an object:

// Define an object with a property that we want to delete
const obj = {
  name: "John Doe",
  age: 15
};

// Delete the "name" property from the object
const result = Reflect.deleteProperty(obj, "name");

// Print the result of the operation
console.log(result); // true
console.log(obj);    // { age: 15 }

In this example, the Reflect.deleteProperty() method deletes the name property from the obj object, and the result variable is set to true to indicate that the property was successfully deleted.

How to Prevent a Property from Being Deleted?

You might find it useful to know that JavaScript also lets you configure your objects such that you cannot remove a specific property.

To do this, use the Object.defineProperty() method, which allows you to define or modify the properties of an object. You can use this method to set the configurable property of a property to false, which prevents the property from being deleted.

For example, let’s prevent the name property from being deleted from the following object:

let myObject = { name: 'John', age: 30 };

Object.defineProperty(myObject, 'name', { configurable: false });

delete myObject.name;

console.log(myObject); // Output: { name: 'John', age: 30 }

As you can see, deleting the property name is not possible anymore. This is because of the restriction we placed on the object.

To make the name property removable, just set the configurable back to true.

let myObject = { name: 'John', age: 30 };

Object.defineProperty(myObject, 'name', { configurable: true });

delete myObject.name;

console.log(myObject); // Output: { age: 30 }

Thanks for reading. Happy coding!

Read Also

The Spread Operator (…) in JavaScript