JavaScript: How to Remove key from Object

To delete or remove key from object in JavaScript, there are 4 methods that can either mutate or not mutate the original object. Let’s explore them!

Methods to Remove key from Object

Here, we will split the methods into 2 categories. Those that will mutate and those that will not mutate to the original object.

Mutate

• delete Operator Method

Not-Mutate

• Destructuring with Rest Operator/Syntax (...) Method
• Array reduce() Method
• Underscorejs omit Method

These methods all assume that we know the key or property to remove. Let’s look at all of them in more details with illustration below.

delete Operator Method

As delete Operator suggest here, it will delete a property of any object. However, be careful as this will mutate and change the original object; cannot get back original data.

Let’s look at the below illustration where we remove the name key of person object.

const person = {
  name: 'my-name',
  age: 11,
};

// Delete with the key put into the place holder
delete person['name']; 

console.log(person); // { age: 11 }

// Delete with the key as attribute
// This will trigger nothing an no error since the key was removed
delete person.name;

console.log(person); // { age: 11 }

Destructuring with Rest Parameters (...) Method

Base on the official documentation of Rest Parameters(…), we can see that it will put an indefinite number of arguments into the variable as an array. To simplify the explanation in this context, it will put the rest of the properties into another object excluding the ones that are declared earlier.

Let’s look at the illustration below, we will remove the name property and place the rest of the properties into otherProperties as an array. Since name is declared first, it will be excluded in the object.

const person = {
  name: 'my-name',
  age: 11,
  height: 160,
};

const {name, ...otherProperties} = person;

console.log(otherProperties); // { age: 11, height: 160 }

Array reduce() Method

From this guide, we know that reduce() will iterate through to perform operation on every element using the return value from the previous iteration to produce 1 final value after completing all iteration. Thus, we can use this to iterate and only include the key we want!

In the example below, we first use Object.keys() method to get the list of keys. Subsequently, we will iterate over the keys and assign over those we want.

const person = {
  name: 'my-name',
  age: 11,
  height: 160,
};

const otherProperties = Object.keys(person).reduce((previousValue, currentKey) => {
    if(currentKey !== "name"){
        previousValue[currentKey] = person[currentKey]
    }
    return previousValue
}, {})

console.log(otherProperties) // { age: 11, height: 160 }

Underscorejs omit Method

Underscorejs is a utility library providing additional helper methods that don’t exist in JavaScript built-in objects. omit method is 1 of such method where we can pass in the key to remove. However, we will need to assign the return value to a new variable since it does not mutate the original object.

const person = {
  name: 'my-name',
  age: 11,
  height: 160,
};
const otherProperties = _.omit(person, 'name'); 

console.log(otherProperties); // { age: 11, height: 160 }

Conclusion

We explore at how we can remove key/property from any object using various methods.

For method that mutate the original object, we can use delete Operator if we are sure that we no longer need the key.

For methods that do not mutate the original object, Rest Parameters (...) and Underscorejs omit method are the easiest method. Underscorejs omit will be especially useful if we are working on a codebase that does not make use of transpile technology like babel.