Skip to main content

How to Remove a Property from All Objects in an Array in JavaScript

When transforming data in JavaScript, a common task is to remove an unwanted property from every object within an array. This is useful for cleaning up API responses before saving them to state, removing sensitive data before logging, or simplifying objects for a specific UI component.

This guide will demonstrate the modern, non-mutating approach using Array.prototype.map() with destructuring, which is the recommended best practice. We will also cover the traditional, mutating approach using Array.prototype.forEach() with the delete operator.

The Core Task: Mutating vs. Non-Mutating​

Before choosing a method, you must decide if you want to modify the original array and its objects, or create a new array of new objects.

  • Non-mutating (Immutable): Creates a new array containing new objects, each without the specified property. The original array and its objects are left untouched. This is the recommended best practice in modern JavaScript as it is safer and leads to more predictable code.
  • Mutating: Modifies the original objects in place. This can be more memory-efficient but can cause unintended side effects if other parts of your code rely on the original objects.

This modern approach is the cleanest and safest way to remove a property. It uses map() to create a new array, and for each object, it uses destructuring with the rest (...) syntax to create a new object that omits the unwanted property.

Problem: you have an array of user objects and you want to create a new array without the password property.

// Problem: Create a new array of users without the 'password' field.
let users = [
  { id: 1, name: 'Alice', password: 'abc' },
  { id: 2, name: 'Bob', password: 'xyz' },
];

Solution:

let users = [
  { id: 1, name: 'Alice', password: 'abc' },
  { id: 2, name: 'Bob', password: 'xyz' },
];

let safeUsers = users.map(({ password, ...rest }) => {
  // `password` is destructured (pulled out).
  // `...rest` collects all other properties into a new object.
  return rest;
});

console.log(safeUsers);
// Output: [ {id: 1, name: 'Alice'}, {id: 2, name: 'Bob'} ]

console.log(users); // The original array is unchanged.
// Output: [ {id: 1, name: 'Alice', password: 'abc'}, {id: 2, name: 'Bob', password: 'xyz'} ]
note

This method elegantly removes the specified property and is the idiomatic standard in modern JavaScript.

The Mutating Method: forEach() and delete​

If you have a specific need to modify the original array in place, you can iterate over it with forEach() and use the delete operator on each object.

Solution:

let users = [
  { id: 1, name: 'Alice', password: 'abc' },
  { id: 2, name: 'Bob', password: 'xyz' },
];

// This modifies each object in the `users` array directly.
users.forEach(user => {
  delete user.password;
});

console.log(users);
// Output: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ]
// The original `users` array has been modified.
note

This approach is more direct but should be used with caution due to its side effects.

How the map() with Destructuring Method Works​

The one-liner ({ password, ...rest }) => rest is a powerful combination of modern JavaScript features.

  1. map(callback): The map method iterates over each user object in the users array.
  2. ({ password, ...rest }): This is a destructuring assignment in the function's parameter list. For each user object it receives, it does two things:
    • It "pulls out" the password property and assigns it to a variable named password (which we then ignore).
    • The rest syntax (...rest) collects all other properties of the user object into a new object called rest.
  3. return rest;: The callback returns this new rest object, which is the original object minus the password property.
  4. map() collects these new objects into a new array, which becomes the final safeUsers array.

You can use this same pattern to remove multiple properties at once:

let newArr = arr.map(({ prop1, prop2, ...rest }) => rest);

Conclusion​

Removing a property from all objects in an array is a common data transformation task with a clear, modern solution.

  • The non-mutating map() with destructuring is the recommended best practice. It is declarative, safe (as it doesn't have side effects), and highly readable: arr.map(({ propToRemove, ...rest }) => rest).
  • The mutating forEach() with delete method is a valid but less safe alternative. It should be used only when you intentionally want to modify the original data in place.

Table of Contents