Remove Property from all Objects in Array in JavaScript

avatar
Borislav Hadzhiev

Last updated: Dec 25, 2022
5 min

banner

# 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 get removed from all objects in the array.
index.js
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);

remove property from all objects in array

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 delete operator is used to remove a property from an 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.
index.js
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);

remove property from all objects in array using array map

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.

The Array.map() method doesn't change the contents of the original array, it returns a new array.

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

index.js
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.

index.js
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 get removed from all objects in the array.
index.js
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);

remove property from all objects in array using for of

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

index.js
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.

index.js
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

shell
# ๐Ÿ‘‡๏ธ 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.

index.js
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:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev