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.

Let us first try to understand how we may create an array with multiple objects with the help of the below-enlightened syntax.

Syntax: The following syntax will help us to understand how we may easily create an array containing multiple objects:

let array_of_objects = [
    {
        property_name: value,
        ...
    },
    {
        property_name: value,
        ...
    },
    ...
]

Now that we have seen the above syntax for creating an array with multiple objects, let us have a quick look at the following example which will help us to understand the above syntax more clearly.

Example 1: In this example, we will try to create an array with multiple objects and then by using Array.map() method we will output all the objects which are present inside our array itself.

Javascript

<script>
    let employees_data = [
        {
            employee_id: 1,
            employee_name: "Aman",
        },
        {
            employee_id: 2,
            employee_name: "Bhargava",
        },
        {
            employee_id: 3,
            employee_name: "Chaitanya",
        },
    ];
    employees_data.map((element) => {
        console.log(element);
    });
</script>

Output:

{ employee_id: 1, employee_name: 'Aman' }
{ employee_id: 2, employee_name: 'Bhargava' }
{ employee_id: 3, employee_name: 'Chaitanya' }

Now let us directly jump into solving our main problem statement which is enlightened above clearly via the following shown example:

Example 2: 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.

Javascript

<script>
    let employees_data = [
        {
            employee_id: 1,
            employee_name: "Aman",
        },
        {
            employee_id: 2,
            employee_name: "Bhargava",
        },
        {
            employee_id: 3,
            employee_name: "Chaitanya",
        },
    ];
    for (let object of employees_data) {
        if (object.employee_id === 2) {
            object.employee_name = "Anthony";
        }
    }
    console.log("Updated Data: ");
    console.log(employees_data);
</script>

Output:

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

Now let us see another approach to solving our main problem statement via the following shown example itself.

Example 3: 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.

Javascript

<script>
    let employees_data = [
        {
            employee_id: 1,
            employee_name: "Aman",
        },
        {
            employee_id: 2,
            employee_name: "Bhargava",
        },
        {
            employee_id: 3,
            employee_name: "Chaitanya",
        },
    ];
    let new_updated_data = employees_data.map((employee) => {
        if (employee.employee_id === 2) {
            return {
                ...employee,
                employee_name: "Anthony",
            };
        }
        return employee;
    });
    console.log("Updated Data: ");
    console.log(new_updated_data);
</script>

Output:

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