JavaScript - Modify Object's Property in an Array of Objects

To modify an object’s property in an array of objects, you can use methods like forEach(), map(), or find() to locate the object and then modify its properties.

Here are some methods to modify an object's property in an array of objects:

1. Using the Array.map() method

The map() method returns a new array with modified objects. It is useful when you want to create a new array based on modifications.

let a = [
    { name: "Sourav", age: 23 },
    { name: "Ajay", age: 25 }
];

let updatedArr = a.map(item => {
    if (item.name === "Ajay") {
        item.age = 26;
    }
    return item;
});

console.log(updatedArr);

[ { name: 'Sourav', age: 23 }, { name: 'Ajay', age: 26 } ]

In this example

• The map() method is used to create a new array (updatedArr) where we modify the age of the object with the name "Ajay".
• The original array remains unchanged.

2. Using for loop

The for loop is a basic and versatile method to iterate through an array and modify its elements.

let a = [
    { name: "Sourav", age: 23 },
    { name: "Ajay", age: 25 }
];

for (let i = 0; i < a.length; i++) {
    if (a[i].name === "Ajay") {
        a[i].age = 26; 
    }
}

console.log(a);

[
  { id: 1, name: 'Alia', age: 30 },
  { id: 2, name: 'Bobby', age: 26 },
  { id: 3, name: 'Charu', age: 35 }
]

In this example

• A simple for loop is used to iterate through the array.
• When the object with the name "Ajay" is found, its age property is updated to 26.

3. Using forEach() method

The forEach() method in JavaScript is used to iterate over an array and execute a provided function on each element. It is a simple and intuitive way to modify a property of an object within an array.

let a = [
    { name: "Sourav", age: 23 },
    { name: "Ajay", age: 25 }
];

a.forEach(item => {
    if (item.name === "Sourav") {
        item.age = 24;
    }
});

console.log(a);

[ { name: 'Sourav', age: 24 }, { name: 'Ajay', age: 25 } ]

In this example

• The forEach() method iterates over each object in the array.
• When the object with the name "Sourav" is found, its age property is updated to 24.

4. Using the find() method and destructuring

If you only need to modify the first object that matches a condition, you can use find() to get the object and modify its properties.

let a = [
    { name: "Sourav", age: 23 },
    { name: "Ajay", age: 25 }
];

let obj = a.find(item => item.name === "Sourav");
if (obj) {
    obj.age = 24; 
}

console.log(a); 

[ { name: 'Sourav', age: 24 }, { name: 'Ajay', age: 25 } ]

In this example

• The find() method returns the first object that matches the condition (where name is "Sourav").
• After finding the object, we modify its age property directly.

5. Using Array.reduce() Method

The reduce() method can be used to modify an object in the array while building a new array.

let a = [
    { name: "Sourav", age: 23 },
    { name: "Ajay", age: 25 }
];

let updatedArr = a.reduce((acc, item) => {
    if (item.name === "Sourav") {
        item.age = 24;
    }
    acc.push(item);
    return acc;
}, []);

console.log(updatedArr);

[ { name: 'Sourav', age: 24 }, { name: 'Ajay', age: 25 } ]

In this example

• The reduce() method iterates over the array and modifies the object that matches the condition.
• The modified object is added to a new accumulator array.

6. Using findIndex() Method

The findIndex() method finds the index of the first object that satisfies the condition, and you can use this index to modify the object directly in the array.

let a = [
    { name: "Sourav", age: 23 },
    { name: "Ajay", age: 25 }
];

let index = a.findIndex(item => item.name === "Sourav");
if (index !== -1) {
    a[index].age = 24;
}

console.log(a); 

[ { name: 'Sourav', age: 24 }, { name: 'Ajay', age: 25 } ]

In this example

• The findIndex() method returns the index of the first object that matches the condition.
• Once the index is found, we can directly modify the object at that index.