JavaScript: 3 Ways to Remove a Property from an Object

When working with Javascript, there might be cases where it becomes necessary to remove single or multiple properties from a given object. For example, if you are creating an API and need to hide certain sensitive information before sending it out or if you are cleaning up data before storing it in a database

In this article, we will walk through 3 different approaches to removing unwanted properties from a Javascript object. Without any further ado, let’s get started.

Using the delete operator

The delete operator is the simplest and most straightforward way to remove a property from a Javascript object. The syntax for using the delete operator is as follows:

delete yourObject.propertyName

You can also use the square brackets like this:

delete yourObject["propertyName"]

Example:

var myObj = {
    name: "John",
    age: 31,
    city: "New York"
};

delete myObj.age;
delete myObj["city"];

// Now myObj doesn't have the "age" and "city" properties
console.log(myObj);

Output:

{ name: 'John' }

The delete operator is probably the most commonly used strategy for removing properties from Javascript objects. It is easy to use and can be used in most situations. However, it does have some drawbacks. For example, it does not create a copy of the object, so any modifications made to the object will be reflected in the original object. Additionally, the delete operator does not have any built-in error handling, so it is important to ensure that the property you are trying to delete actually exists in the object. To stay safe and make the code looks better (especially when the property names are dynamic), you can add some checks to the example above like this:

var myObj = {
    name: "John",
    age: 31,
    city: "New York"
};

// remove property "age" if it exists
if(myObj.hasOwnProperty("age")){
    delete myObj.age;
}

// remove property "city" if it exists
if("city" in myObj){
    delete myObj["city"];
}

console.log(myObj);

Using Object Destructuring

Using object restructuring is another solution to remove properties from a Javascript object. Below is the syntax:

const { unwantedProperty, ...remainingObject } = myObject;

Where:

• unwantedProperty: The property you want to get rid of
• remainingObject: The object you will receive after removing the unwanted property
• myObject: The original object which will not be changed

It’s possible to discard multiple properties at once, like this:

const { unwantedProperty1, 
        unwantedProperty2,
        unwantedProperty3,
        unwantedPropertyN,
        , ...remainingObject 
} = myObject;

Here’s a concrete example:

const myObject = {
    name: "John Doe",
    age: 40,
    country: "USA"
};

// Remove "name" and "age" properties
const { name, age, ...rest } = myObject;
console.log(rest);

Output:

{ country: 'USA' }

In case the name of the property you want to remove is stored in a variable:

const myObject = {
    name: "John Doe",
    age: 40,
    country: "USA"
};

const unwantedProperty = "age";
const { [unwantedProperty]: _, ...remainingOjbect } = myObject;
console.log(remainingOjbect)
// { name: 'John Doe', country: 'USA' }

If you’re trying to eliminate a non-existing property, it still works with no error messages.

Using a loop

You can also use a loop to remove one or many properties from an object. This is good for your reference, although it is quite verbose compared to the 2 methods mentioned above.

Example:

const obj = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5
};

const newObj = {};
const keyToRemove1 = 'b';
const keyToRemove2 = 'd';

for (let key in obj) {
    if (key !== 'b' && key !== 'd') {
        newObj[key] = obj[key];
    }
}

console.log(newObj)

Output:

{ a: 1, c: 3, e: 5 }

Conclusion

We’ve explored a couple of distinct ways to clear out some entries from a Javascript object. Which one do you like best? Please leave your opinion in the comment section.