Update an Object's Property in Array of Objects in JS

avatar

Borislav Hadzhiev

Thu Nov 11 20213 min read

Update an Object's Property in Array of Objects #

To update an object's property in an array of objects, use the map() method to iterate over the array. On each iteration, check if the current object is the one to be updated. If it is, modify the object and return the result, otherwise return the object as is.

index.js
// ✅ Updating properties in multiple objects const arr1 = [ {id: 1, name: 'Alice'}, {id: 1, name: 'Bob'}, {id: 3, name: 'Charlie'}, ]; const newArr = arr1.map(obj => { if (obj.id === 1) { return {...obj, name: 'Alfred'}; } return obj; }); // 👇️ [ // {id: 1, name: 'Alfred'}, {id: 1, name: 'Alfred'}, {id: 3, name: 'Charlie} // ] console.log(newArr);

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

This is useful in the scenario that you might need to update the properties of multiple objects. If you only need to update the property of the first object that matches a condition, scroll down to the next code snippet.

Whatever we return from the function we passed to the map() method, gets inserted into the new array.

The map() method does not mutate the original array, it returns a new array.

On each iteration, we check if the object has an id property equal to 1, and if it does we use the spread operator (...) to unpack the other key-value pairs of the object and override the name property.

If the condition is not met, we return the object as is.

Notice that our array has 2 objects with an id of 1. Since the map() method iterates over the entire array, it updated both.

This is inefficient if you only want to update the first property in the array that matches a condition, in this scenario you could use the for...of loop.

To update an object's property in an array of objects, use the for...of loop to iterate over the array. On each iteration check if the object is the one to be updated and if it is, modify it and use the break keyword to short-circuit.

index.js
// ✅ Updating the property of a single Object const arr2 = [ {id: 1, name: 'Alice'}, {id: 1, name: 'Bob'}, {id: 3, name: 'Charlie'}, ]; for (const obj of arr2) { if (obj.id === 1) { obj.name = 'Alfred'; break; } } // 👇️ [{id: 1, name: 'Alfred'}, {id: 1, name: 'Bob'}, {id: 3, name: 'Charlie}] console.log(arr2);

The for...of loop allows us to iterate over an array.

On each iteration, we check if the id property of the object is equal to 1. If it is, we update the value of the name property and use the break keyword to exit the for loop.

Because we only want to update the first object that matches the condition, we short-circuit to avoid unnecessary work.

Even though our array has 2 objects with an id of 1, only the name property of the first object got updated.

This approach modifies the object in the original array, as opposed to the map() method, which we used to returned a new array.

Further Reading #

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee