How to modify an object’s property in an array of objects in JavaScript ?

In this article, we will try to understand how we may modify an object’s property in an array of objects in JavaScript using an example that contains a valid as well as justified approach.

There are several methods that can be used to modify an object’s property in an array of objects in JavaScript

• Using Array.map() method
• Using for-of loop
• Using Array.map() with spread operator
• Using forEach() method
• Using the find() method and destructuring.

Approach 1: Using Array.map() method

Using the map() method to create a new array by transforming each element of the original array based on a specified function.

Syntax:

arr.map((element) => { /* … */ })

Example: In this example, The map() method creates a new array with the employee_name modified to “Rahul” for the object with employee_id 2.

[
  { employee_id: 1, employee_name: 'Aman' },
  { employee_id: 2, employee_name: 'rahul' },
  { employee_id: 3, employee_name: 'Chaitanya' }
]

Approach 2: Using the for-of loop

Using a for loop to traverse an array of objects, finding and modifying the property of a specific object as per a condition.

Syntax:

for ( variable of iterableObjectName) {
   ...
}

Example: In this example, we will try to use the same array of objects which we have created previously, and then we will use the for-of loop in order to update the existing object’s property’s value.

Updated Data: 
[
  { employee_id: 1, employee_name: 'Aman' },
  { employee_id: 2, employee_name: 'Anthony' },
  { employee_id: 3, employee_name: 'Chaitanya' }
]

Approach 3: Using Array.map() with spread operator

Using Array.map() to create a new array with the spread operator to modify specific object properties.

Syntax:

employees_data.map((employee) => {
    if (employee.employee_id === 2) {
        return {
            ...employee,
            employee_name: "Anthony",
        };
    }
    return employee;
});

Example: In this example, we will use Array.map() method as well as spread operator (…) for spreading the object itself in order to update the existing object’s property value by using the same array of objects created previously.

Updated Data: 
[
  { employee_id: 1, employee_name: 'Aman' },
  { employee_id: 2, employee_name: 'Anthony' },
  { employee_id: 3, employee_name: 'Chaitanya' }
]

Approach 4: Using forEach() method

Using forEach() method, iterate through the array of objects, check the condition, and modify the property of the matching object.

Syntax:

array.forEach(callback(element, index, arr), thisValue)

Example: In this example, we are using the above-explained approach.

[
  { employee_id: 1, employee_name: 'Aman' },
  { employee_id: 2, employee_name: 'Ankit' },
  { employee_id: 3, employee_name: 'Chaitanya' }
]

Approach 5 : Using the find() method and destructuring

Using find() to search for the object with the specified property value, and destructuring to modify the property.

Syntax:

array.find(function(currentValue, index, arr),thisValue);

Example: In this example, we will modify the employee_name property for the object with employee_id equal to 2 to “Kavita”.

[
  { employee_id: 1, employee_name: 'Aman' },
  { employee_id: 2, employee_name: 'Kavita' },
  { employee_id: 3, employee_name: 'Chaitanya' }
]