How to remove a property from a JavaScript object?

In this tutorial, we will look at a few methods to remove a property from a JavaScript object. And compare them to understand which one is suitable in a given context.

Let's move forward to discuss this.

Using the delete Operator

Here, the delete operator removes the keys from the object, one at a time. The delete operator does not clear the memory directly.

The delete keyword works on objects only. We can't use it on variables or functions. We should not use the delete keyword on predefined JavaScript object properties as it may give errors. The deleted property displays undefined if we try to access it.

The delete operation is mutable because it modifies the actual object. But this is the right way to remove the property from an object.

Users can follow the syntax below for using this method.

Syntax

//static property
delete object.property;

//dynamic property
delete object[property];

The first is used when the property is known. The next is when the property is a runtime value.

Properties

  • object − The name of an object.

  • property − The name of the property to delete.

Example

In this program, we have a JavaScript object named employee. We are deleting the age property from this object using the delete keyword.

<html>
<body>
   <h3>Remove a property from a JavaScript object using the<i> delete </i>keyword </h3>
   <p id="result1"> </p>
   <p id="result2"> </p>
   <script>
      var employee = {
         firstname: "John",
         lastname: "Eagan",
         age: 20
      };
      var remPropData = "Object before delete <br>" + JSON.stringify(employee);
      document.getElementById("result1").innerHTML = remPropData;
      delete employee.age;
      remPropData = "Object after deleting age <br>" + JSON.stringify(employee);
      document.getElementById("result2").innerHTML = remPropData;
   </script>
</body>
</html>

By Setting the Property Value to "undefined"

We can go for this option when we are in a situation where we are using a large number of loops. We are making the delete process optimal by setting the property value to 'undefined'. The delete operation is 50 times slower than a simple assignment with 'undefined'.

In reality, the property is not deleted. It's just cleared out.

Syntax

object.property = undefined;

Here, we are assigning undefined to the object's property.

Example

In this program, our object name is color. Using the assignment syntax above, we remove the place property from the color object.

<html>
<body>
   <h3>Remove a property from a JavaScript object</h3>
   <p>setting the property value to <i>undefined</i></p>
   <p id="result1"> </p>
   <p id="result2"> </p>
   <script>
      const color = {
         value: "blue",
         place: "sky"
      }
      var setPropData = "Before delete<br>" + JSON.stringify(color);
      document.getElementById("result1").innerHTML = setPropData;
      color.place = undefined;
      setPropData = "After delete color.place - " + color.place + "<br>" + JSON.stringify(color);
      document.getElementById("result2").innerHTML = setPropData;
   </script>
</body>
</html>

Using object Destructuring

Here the idea is easy. We should destructure the object to the property that we want to remove. Then save the remaining properties in another object.

Object destructuring is the process of extracting data from the objects to new variables. Object destructuring is an immutable method because it does not change the actual object, instead creates another object to get the required properties except the one to remove.

The main advantage is that this method removes more than one property at a time.

Syntax

//static property
const {prop, ...remainObj} = obj

//dynamic property
const name = 'prop';
const {[name]: removedProperty, ...remainObj} = obj

Here, the first syntax is used when we know the property name. The second syntax is used when the property name changes dynamically.

Parameters

  • prop − The property that we need to remove.

  • remainObj − The object after removing particular property.

  • obj − The main object.

  • name − A variable to use property name at run time.

  • removedProperty − A built-in keyword in the syntax

Example

In this example, we have the person object. We are removing position and the properties using the spread operator.

<html>
<body>
   <h3>Remove a property from a JavaScript object</h3>
   <p>Using object destructuring with spread operator</i></p>
   <p id="result1">Object before delete:<br></p>
   <p id="result2">Object after deleting property- position<br></p>
   <script>
      const person = {
         name: 'John',
         position: 'Manager',
         exp: 6
      };
      var sprPropData = JSON.stringify(person);
      document.getElementById("result1").innerHTML += sprPropData;
      const {position, ...personTemp} = person;
      sprPropData = JSON.stringify(personTemp);
      document.getElementById("result2").innerHTML += sprPropData;
   </script>
</body>
</html>

Using the reduce() Method

Here, the reduce() is a built-in array function. The input to this function is a collection, and a reduction function is an argument.

The method loops through all elements and modifies the accumulator, which acts like a new object.

Syntax

const newObj = Object.keys(actualObj).reduce((accumulator, key) => {
   if(key!=="property"){
      accumulator[key] = actualObj[key]
   }
   return accumulator;
}, {})

Here, accumulator reducer function logic is used to remove the property.

Properties

  • actualObj − The JSON object.

  • accumulator − If the key is less than the accumulator value, the key value becomes the next accumulator.

  • key − The current value = The key.

Example

In this example, our object is pets. We are going to remove the gift property alone from this object. The reduce method accumulator and key value comparison take place in every loop. Finally, we get the object without the gift property.

<html>
<body>
   <h3>Remove a property from a JavaScript object using the
   <i> reduce()</i>method</h3>
   <p id="result1">Object before delete:<br> <br></p>
   <p id="result2">Object after deleting property <br><br></p>
   <script>
      const pets = {
         name: "Tomy",
         age: 3,
         gift: "Love"
      }
      var reducPropData = JSON.stringify(pets);
      document.getElementById("result1").innerHTML += reducPropData;
      const newPet = Object.keys(pets).reduce((accumulator, key) => {

         // Copy all except gift property
         if (key !== "gift") {
            accumulator[key] = pets[key]
         }
         return accumulator;
      }, {})
      reducPropData = JSON.stringify(newPet);
      document.getElementById("result2").innerHTML += reducPropData;
   </script>
</body>
</html>

This tutorial helped us learn how to remove a JavaScript object's property.

The delete method is simple. Assigning undefined to the property value is a worse approach. A destructuring syntax is a good approach as it does not modify the actual object.

The final method is the reduce function which is a good option. Users can choose any method according to the requirements.

Updated on: 06-Sep-2022

2K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements