Remove property for all objects in an array

javascript

promises

map

functional-programming

byNikita Barsukov·Mar 4, 2025

To remove a property from all objects in an array, use the forEach method coupled with the delete operator:

let arr = [{a: 1, b: 2}, {a: 3, b: 4}];
arr.forEach(obj => delete obj.b); // Bye, bye b 👋
// arr is now [{a: 1}, {a: 3}]

This modifies the original array, effectively removing the b property from each item within.

Method 2: ES6 approach with `map` and destructuring

With ES6 and beyond, you can opt for a more elegant technique involving the map method and destructuring:

let arr = [{a: 1, b: 2}, {a: 3, b: 4}];
let modifiedArr = arr.map(({b, ...rest}) => rest); 
// Yeah, we just ghosted 'b' property 👻
// modifiedArr is now [{a: 1}, {a: 3}], arr remains unaltered

This code creates a new array containing objects that exclude the undesired property.

Considerations: Performance implications with `delete`

The delete operator might cause performance drops when handling large datasets. In such scenarios, it'd be more efficient to set the unwanted property to undefined:

arr.forEach(obj => obj.b = undefined); 
// Say, "Hello, darkness my old friend..." to undefined 🌑

While this method does not eliminate the key itself, it helps to prevent potential degradation in performance.

Method 3: Compatibility fix for older browsers

If compatibility with older browsers lacking support for forEach or map is necessary, you may introduce a polyfill or use a library like Prototype.js. Alternatively, you could use a conventional for loop combined with hasOwnProperty:

for (let i = 0; i < arr.length; i++) {
  if (arr[i].hasOwnProperty('b')) {
    // 'b' here today, gone tomorrow 👽
    delete arr[i].b;
  }
}

While using higher-order functions in arrays is generally the more readable and preferred approach in modern JavaScript, this retro way works effectively as a fallback.

Pitfall Alert: Non-existing properties

If you attempt to remove properties that aren't present in some objects within the array, the behaviour might become unpredictable. Therefore, check for the property's existence:

arr.forEach(obj => {
  if('b' in obj) delete obj.b;
});

By doing so, we ensure only objects with the b property get it omitted, ensuring consistent data throughout.

Method 4: Extending functionality with prototypes and frameworks

For the nerds out there who enjoy using frameworks, JavaScript prototypes could be your solution. By expanding the Array prototype with a custom method, you can remove properties with grace:

Array.prototype.removeProperty = function(prop) {
  return this.map(obj => {
    const { [prop]: _, ...rest } = obj;
    return rest;
  });
};

let cleanArr = arr.removeProperty('b'); 
// 'b' just got served an eviction notice 🏠💼

Just remember to follow the prototype practices to avoid conflict with other libraries or potential ECMAScript future releases.

Important takeaways and potential traps

While these methods work pretty well, there are a few things to keep in mind:

Overzealous usage of `delete`

Delete is a heavy operator in JavaScript, and might cause performance issues for larger objects or arrays. It's often more efficient to set the unwanted properties to undefined.