Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Remove property for all objects in array in JavaScript?
Removing properties from all objects in an array is a common JavaScript task. You can accomplish this using either the delete operator (which mutates the original objects) or object destructuring with the rest operator (which creates new objects).
A collection of key-value pairs constitutes an object in JavaScript. A key-value pair among them is referred to as an object property. Any data type, including Number, String, Array, Object, etc., can be used for both the keys and values of properties.
Method 1: Using the delete Operator (Mutable)
The delete operator removes both the property's value and the property itself from the original object. This method mutates the existing objects in the array.
Syntax
delete object.propertyName; // or delete object['propertyName'];
Example
In the following example, we use the delete operator to remove the "name" property from all objects in the array:
<!DOCTYPE html>
<html>
<body>
<p id="result1"></p>
<script>
const arr = [
{id: 1, name: 'teja', test: 'abd'},
{id: 2, name: 'suri', test: 'msd'},
];
arr.forEach(object => {
delete object['name'];
});
document.getElementById("result1").innerHTML = JSON.stringify(arr);
</script>
</body>
</html>
[{"id":1,"test":"abd"},{"id":2,"test":"msd"}]
Removing Multiple Properties
To remove multiple properties, you can call delete multiple times:
<!DOCTYPE html>
<html>
<body>
<p id="result2"></p>
<script>
const values = [
{"firstName": "John", "lastName": "Smith", "age": 30},
{"firstName": "David", "lastName": "Miller", "age": 25},
{"firstName": "Adam", "lastName": "Smith", "age": 35}
];
values.forEach(function(obj) {
delete obj.lastName;
delete obj.age;
});
document.getElementById("result2").innerHTML = JSON.stringify(values);
</script>
</body>
</html>
[{"firstName":"John"},{"firstName":"David"},{"firstName":"Adam"}]
Method 2: Using Object Destructuring (Immutable)
Object destructuring with the rest operator creates new objects without the unwanted properties, leaving the original objects unchanged. This is the preferred approach when you want to maintain immutability.
Example: Single Object
<!DOCTYPE html>
<html>
<body>
<p id="result3"></p>
<script>
const person = {
firstName: "don",
lastName: "bosco",
gender: "Male",
age: 21
};
// Remove age and gender properties
const {age, gender, ...personTrimmed} = person;
document.getElementById("result3").innerHTML = JSON.stringify(personTrimmed);
</script>
</body>
</html>
{"firstName":"don","lastName":"bosco"}
Example: Array of Objects
For arrays, use map() with destructuring to create a new array with modified objects:
<!DOCTYPE html>
<html>
<body>
<p id="result4"></p>
<script>
const users = [
{id: 1, name: 'John', email: 'john@email.com', password: '123'},
{id: 2, name: 'Jane', email: 'jane@email.com', password: '456'}
];
// Remove password property from all objects
const safeUsers = users.map(({password, ...user}) => user);
document.getElementById("result4").innerHTML = JSON.stringify(safeUsers);
</script>
</body>
</html>
[{"id":1,"name":"John","email":"john@email.com"},{"id":2,"name":"Jane","email":"jane@email.com"}]
Comparison
| Method | Mutates Original? | Multiple Properties | Performance |
|---|---|---|---|
delete operator |
Yes | Multiple calls needed | Faster |
| Object destructuring | No | Single operation | Creates new objects |
Conclusion
Use the delete operator when you want to modify objects in place, or object destructuring when immutability is important. Destructuring is particularly useful for removing multiple properties in a single operation.
2K+ Views
