Article Categories

Selected Reading

Removing property from a JSON object in JavaScript

Javascript Web Development Front End Technology

A JSON (JavaScript Object Notation) object is a data structure surrounded by curly braces {}. JSON objects contain key-value pairs where keys must be strings and values can be numbers, strings, objects, booleans, arrays, or null.

JavaScript provides several methods to remove properties from objects. Each method has different characteristics - some modify the original object, while others create new objects without the unwanted properties.

Basic JSON Object Structure

Here's the basic syntax for a JSON object:

const jsonObject = {
   "name": "John",
   "age": 30,
   "city": "New York"
};

Method 1: Using the delete Operator

The delete operator is the most direct way to remove a property from an object. It modifies the original object and returns true if the deletion was successful.

<!DOCTYPE html>
<html>
<head>
   <title>Delete Operator Example</title>
</head>
<body>
   <p id="result"></p>
   <script>
      const player = {
         'name': 'Dhoni',
         'role': 'Wicket-keeper',
         'age': 41,
         'batting': 'Right-handed'
      };
      
      delete player.role;
      
      document.getElementById("result").innerHTML = 
         "After deleting role: " + JSON.stringify(player);
   </script>
</body>
</html>

After deleting role: {"name":"Dhoni","age":41,"batting":"Right-handed"}

Method 2: Using Destructuring Assignment

Destructuring assignment creates a new object without the specified properties. This is an immutable approach that doesn't modify the original object.

<!DOCTYPE html>
<html>
<head>
   <title>Destructuring Assignment Example</title>
</head>
<body>
   <p id="result"></p>
   <script>
      const player = {
         'name': 'Kohli',
         'role': 'Batsman',
         'age': 34,
         'batting': 'Right-handed'
      };
      
      const { name, batting, ...newPlayer } = player;
      
      document.getElementById("result").innerHTML = 
         "After removing name and batting: " + JSON.stringify(newPlayer);
   </script>
</body>
</html>

After removing name and batting: {"role":"Batsman","age":34}

Method 3: Using Object.keys() with reduce()

This method filters out unwanted properties using reduce() to build a new object:

<!DOCTYPE html>
<html>
<head>
   <title>Reduce Method Example</title>
</head>
<body>
   <p id="result"></p>
   <script>
      const player = {
         'name': 'Kohli',
         'role': 'Batsman',
         'age': 34,
         'batting': 'Right-handed'
      };
      
      const filteredPlayer = Object.keys(player).reduce((acc, prop) => {
         if (prop !== 'batting') {
            acc[prop] = player[prop];
         }
         return acc;
      }, {});
      
      document.getElementById("result").innerHTML = 
         "After removing batting: " + JSON.stringify(filteredPlayer);
   </script>
</body>
</html>

After removing batting: {"name":"Kohli","role":"Batsman","age":34}

Method 4: Using Reflect.deleteProperty()

The Reflect.deleteProperty() method works similarly to the delete operator but provides better error handling:

<!DOCTYPE html>
<html>
<head>
   <title>Reflect.deleteProperty Example</title>
</head>
<body>
   <button onclick="removeProperty()">Remove Role Property</button>
   <p id="result"></p>
   <script>
      const player = {
         'name': 'Rohit Sharma',
         'role': 'Batsman',
         'age': 36,
         'batting': 'Right-handed'
      };
      
      function removeProperty() {
         const success = Reflect.deleteProperty(player, 'role');
         document.getElementById("result").innerHTML = 
            "Deletion successful: " + success + "<br>" +
            "Updated object: " + JSON.stringify(player);
      }
   </script>
</body>
</html>

Method 5: Using for...in Loop

This method manually iterates through properties and copies only the desired ones to a new object:

<!DOCTYPE html>
<html>
<head>
   <title>For...in Loop Example</title>
</head>
<body>
   <button onclick="filterProperties()">Remove Age Property</button>
   <p id="result"></p>
   <script>
      const player = {
         'name': 'Rohit Sharma',
         'role': 'Batsman',
         'age': 36,
         'batting': 'Right-handed'
      };
      
      function filterProperties() {
         let newPlayer = {};
         for (const prop in player) {
            if (prop !== 'age') {
               newPlayer[prop] = player[prop];
            }
         }
         document.getElementById("result").innerHTML = 
            "After removing age: " + JSON.stringify(newPlayer);
      }
   </script>
</body>
</html>

Comparison of Methods

Method	Modifies Original	Performance	Use Case
`delete`	Yes	Fast	Simple property removal
Destructuring	No	Moderate	Immutable operations
`reduce()`	No	Moderate	Complex filtering logic
`Reflect.deleteProperty()`	Yes	Fast	Better error handling
`for...in`	No	Slower	Custom iteration logic

Conclusion

The delete operator is the most straightforward method for removing properties from JSON objects. For immutable operations, use destructuring assignment or the reduce() method to create new objects without unwanted properties.

Nikhilesh Aleti

Updated on: 2026-03-15T23:19:00+05:30

7K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next