Remove Property from all Objects in Array in JavaScript

# Table of Contents

1. Remove Property from all Objects in Array in JavaScript
2. Remove Property from all Objects in Array using Array.map()
3. Remove Property from all Objects in Array using for...of
4. Remove Property from all Objects in Array using a for loop
5. Remove Property from all Objects in Array using lodash

# Remove Property from all Objects in Array in JavaScript

To remove a property from all objects in an array:

1. Use the Array.forEach() method to iterate over the array.
2. On each iteration, use the delete operator to delete the specific property.
3. The property will be removed from all objects in the array.

Copied!
const arr = [
  {id: 1, name: 'Bobby', test: 'abc'},
  {id: 2, name: 'Hadz', test: 'xyz'},
];

arr.forEach(object => {
  delete object['test'];
});

// 👇️ [{id: 1, name: 'Bobby'}, {id: 2, name: 'Hadz'}]
console.log(arr);

The function we passed to the Array.forEach method gets called with each element (object) in the array.

We used the delete operator to delete the test property from each object.

The code sample mutates the original array. If you want to remove the property from all objects in the array without changing the original, use the Array.map() method.

# Remove Property from all Objects in Array using Array.map()

This is a three-step process:

1. Use the Array.map() method to iterate over the array.
2. Use destructuring assignment to extract the property to be removed.
3. Return the rest of the properties from the map() method.

Copied!
const arr = [
  {id: 1, name: 'Bobby', test: 'abc'},
  {id: 2, name: 'Hadz', test: 'xyz'},
];

const newArr = arr.map(({test, ...rest}) => {
  return rest;
});

// 👇️ [{id: 1, name: 'Bobby'},  {id: 2, name: 'Hadz'}]
console.log(newArr);

The function we passed to the Array.map() method gets invoked with each element (object) in the array.

We destructured the test property from each object and used the rest operator (...) to get the rest of the object's properties.

We returned the rest of the object's properties from the function, practically excluding the test property.

Here is an example that removes multiple properties from all objects in the array.

Copied!
const arr = [
  {id: 1, name: 'Bobby', test: 'abc'},
  {id: 2, name: 'Hadz', test: 'xyz'},
];

const newArr = arr.map(({test, id, ...rest}) => {
  return rest;
});

// 👇️ [ { name: 'Bobby' }, { name: 'Hadz' } ]
console.log(newArr);

We destructured the test and id properties in the callback function and returned the rest.

All objects in the new array don't have the test and id properties.

If you need to remove many properties from each object in the array, it might be better to specify the properties that you want to keep in the call to the Array.map() method.

Copied!
const arr = [
  {id: 1, name: 'Bobby', test: 'abc'},
  {id: 2, name: 'Hadz', test: 'xyz'},
];

const newArr = arr.map(({id, name}) => {
  return {id, name};
});

// 👇️ [ { id: 1, name: 'Bobby' }, { id: 2, name: 'Hadz' } ]
console.log(newArr);

We destructured the id and name properties and returned an object that contains the properties.

This approach is useful if the number of properties you need to remove from each object exceeds the number of properties you want to keep.

Alternatively, you can use a for...of loop.

# Remove Property from all Objects in Array using for...of

This is a three-step process:

1. Use a for...of loop to iterate over the array.
2. On each iteration, use the delete operator to delete the specific property.
3. The property will be removed from all objects in the array.

Copied!
const arr = [
  {id: 1, name: 'Bobby', test: 'abc'},
  {id: 2, name: 'Hadz', test: 'xyz'},
];

for (const obj of arr) {
  delete obj['test'];
}

// 👇️ [ { id: 1, name: 'Bobby' }, { id: 2, name: 'Hadz' } ]
console.log(arr);

We used a for...of loop to iterate over the array of objects.

The for...of statement is used to loop over iterable objects like arrays, strings, Map, Set and NodeList objects and generators.

On each iteration, we use the delete operator to remove the test property from the current object.

# Remove Property from all Objects in Array using a for loop

You can also use a basic for loop to remove a property from all objects in an array

Copied!
const arr = [
  {id: 1, name: 'Bobby', test: 'abc'},
  {id: 2, name: 'Hadz', test: 'xyz'},
];

for (let index = 0; index < arr.length; index++) {
  delete arr['test'];
}

// [
//   { id: 1, name: 'Bobby', test: 'abc' },
//   { id: 2, name: 'Hadz', test: 'xyz' }
// ]
console.log(arr);

We used a basic for loop to iterate over the array.

On each iteration, we use the delete operator to delete the test property from the current object.

After the last iteration, the property is removed from all objects in the array.

Which approach you pick is a matter of personal preference. I'd use the Array.map() method to avoid mutating the original array.

# Remove Property from all Objects in Array using lodash

If you use the lodash library, you can also use the lodash.omit method to remove a property from all objects in an array.

Copied!
import _ from 'lodash';

const arr = [
  {id: 1, name: 'Bobby', test: 'abc'},
  {id: 2, name: 'Hadz', test: 'xyz'},
];

const newArray = arr.map(obj => {
  return _.omit(obj, ['test']);
});

// 👇️ [ { id: 1, name: 'Bobby' }, { id: 2, name: 'Hadz' } ]
console.log(newArray);

Use the following command if you need to install the lodash library

Copied!
# 👇️ initialize a package.json file if you don't have one
npm init -y

npm install lodash

The lodash.omit method takes an object and an array of properties as parameters and removes the specified properties from the object.

We used the Array.map() method to iterate over the array of objects and called the omit() method on each object.

You can also pass multiple properties to the omit() method.

Copied!
import _ from 'lodash';

const arr = [
  {id: 1, name: 'Bobby', test: 'abc'},
  {id: 2, name: 'Hadz', test: 'xyz'},
];

const newArray = arr.map(obj => {
  return _.omit(obj, ['test', 'id']);
});

// 👇️ [ { name: 'Bobby' }, { name: 'Hadz' } ]
console.log(newArray);

The code sample removes the test and id properties from each object in the array.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Check if all Object Properties are Null in JavaScript
• Add a Key/Value pair to all Objects in Array in JavaScript