You can use both map() and forEach() methods to modify the properties of a specific object from an array of objects in JavaScript.
I will show you 2 techniques using those two methods. These techniques won't even change the object order in your array.
Update Object Using map() Method
This method creates a new array with the updated object, leaving the original array unchanged. This is generally preferred for immutability.
I have an array of objects. I want to update a specific object whose id property is equal to 2.
const people = [
{ id: 1, name: 'John', age: 31 },
{ id: 2, name: 'Jane', age: 26 },
{ id: 3, name: 'Max', age: 47 },
]
const updated = people.map((person) => {
if (person.id === 2) {
return { ...person, age: 28 }
}
return person
})
console.log(updated)
Output:
[
{ id: 1, name: 'John', age: 31 },
{ id: 2, name: 'Jane', age: 28 },
{ id: 3, name: 'Max', age: 47 }
]
Call the map() method on the people array to loop over it. Inside the callback function, update the current person object if its id is equal to 2.
Here, I am using the spread syntax to copy the current person object and then update the age property value. You can update multiple properties if you want.
When the loop completes, you will get a new array with the updated object, and the people array will remain the same.
Update Object Using forEach() Method
When you use the forEach() method to update an object from an array, you can do it in 2 ways.
You can create a new array without modifying the original array or you can modify the original array without creating another array.
Without Changing The Original Array
const people = [
{ id: 1, name: 'John', age: 31 },
{ id: 2, name: 'Jane', age: 26 },
{ id: 3, name: 'Max', age: 47 },
]
const updated = []
people.forEach((person) => {
if (person.id === 2) {
updated.push({ ...person, age: 28 })
return
}
updated.push(person)
})
console.log(people)
console.log(updated)
Output:
// "people" array
[
{ id: 1, name: 'John', age: 31 },
{ id: 2, name: 'Jane', age: 26 },
{ id: 3, name: 'Max', age: 47 }
]
// "updated" array
[
{ id: 1, name: 'John', age: 31 },
{ id: 2, name: 'Jane', age: 28 },
{ id: 3, name: 'Max', age: 47 }
]
Declare an empty array to store the objects.
Call the forEach() method on the people array. If the person.id is equal to 2, I will update the object and push it to the updated array.
Don't forget to use return inside the if statement.
If the person.id is not equal to 2, I will push the person object to the updated array.
Modify The Original Array
const people = [
{ id: 1, name: 'John', age: 31 },
{ id: 2, name: 'Jane', age: 26 },
{ id: 3, name: 'Max', age: 47 },
]
people.forEach((person) => {
if (person.id === 2) {
person.age = 28
}
})
console.log(people)
Output:
[
{ id: 1, name: 'John', age: 31 },
{ id: 2, name: 'Jane', age: 28 },
{ id: 3, name: 'Max', age: 47 }
]
To update an object by modifying the original array, you have to the properties directly from the person object inside the callback function.
When I update the person.age property value inside the forEach() callback function, it will modify the object from the people array.
