How to compare Arrays of Objects in JavaScript?

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

Last Updated : 07 Jan, 2025

Modifying an object’s property in an array of objects in JavaScript involves accessing the specific object within the array and updating its property.

Using the 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.

let emp_data = [
    {
        emp_id: 1,
        emp_name: "Aman",
    },
    {
        emp_id: 2,
        emp_name: "Rashi",
    },
    {
        emp_id: 3,
        emp_name: "Nitya",
    },
];

const modiEmp = emp_data.map(obj => { 
    if (obj.emp_id === 2) {
        return { ...obj, emp_name: "rahul" };
    }
    return obj;
});

console.log(modiEmp);

Output

[
  { emp_id: 1, emp_name: 'Aman' },
  { emp_id: 2, emp_name: 'rahul' },
  { emp_id: 3, emp_name: 'Nitya' }
]

emp_data contains employee details.
The map() method creates a new array, updating the emp_name to "rahul" for emp_id 2, while leaving other objects unchanged.
Logs the modified employee array.

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.

let emp_data = [
    {
        emp_id: 1,
        emp_name: "Rishi",
    },
    {
        emp_id: 2,
        emp_name: "Sneha",
    },
    {
        emp_id: 3,
        emp_name: "Dharna",
    },
];
for (let object of emp_data) {
    if (object.emp_id === 2) {
        object.emp_name = "Ravi";
    }
}
console.log("Updated Data: ");
console.log(emp_data);

Output

Updated Data: 
[
  { emp_id: 1, emp_name: 'Rishi' },
  { emp_id: 2, emp_name: 'Ravi' },
  { emp_id: 3, emp_name: 'Dharna' }
]

emp_data contains employee details.
The for...of loop iterates through the array. If emp_id is 2, the emp_name is updated to "Ravi".
Logs the updated employee array.

Using Array.map() with spread operator

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

let emp_data = [
    {
        emp_id: 1,
        emp_name: "Neeta",
    },
    {
        emp_id: 2,
        emp_name: "Bharat",
    },
    {
        emp_id: 3,
        emp_name: "Rohan",
    },
];
let data =
    emp_data.map((emp) => {
        if (emp.emp_id === 2) {
            return {
                ...emp,
                emp_name: "Meeta",
            };
        }
        return emp;
    });
console.log("Updated Data: ");
console.log(data);

Output

Updated Data: 
[
  { emp_id: 1, emp_name: 'Neeta' },
  { emp_id: 2, emp_name: 'Meeta' },
  { emp_id: 3, emp_name: 'Rohan' }
]

emp_data contains employee details.
The map() method creates a new array. For emp_id 2, emp_name is updated to "Meeta", while other entries remain unchanged.
Logs the updated array without modifying the original.

Using forEach() method

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

let emp_data = [
    {
        emp_id: 1,
        emp_name: "Aman",
    },
    {
        emp_id: 2,
        emp_name: "Akku",
    },
    {
        emp_id: 3,
        emp_name: "Madhav",
    },
];

const res = (arr, tar_Id, newProp) => {
    arr.forEach(obj => {
        if (obj.emp_id === tar_Id) {
            obj.emp_name = newProp;
        }
    });
};

res(emp_data, 2, "Ankit");
console.log(emp_data);

Output

[
  { emp_id: 1, emp_name: 'Aman' },
  { emp_id: 2, emp_name: 'Ankit' },
  { emp_id: 3, emp_name: 'Madhav' }
]

The function modifyProperty updates the emp_name of an employee with a specific emp_id in the emp_data array.
It uses forEach to find the matching emp_id and changes the emp_name to the new value.

Using the find() method and destructuring

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

let emp_data = [
    {
        emp_id: 1,
        emp_name: "Mohan",
    },
    {
        emp_id: 2,
        emp_name: "Jaya",
    },
    {
        emp_id: 3,
        emp_name: "Amit",
    },
];

const modiProp = (arr, tar_Id, newProp) => {
    const tar_Obj = arr.find(obj => obj.emp_id === tar_Id);
    if (tar_Obj) {
        tar_Obj.emp_name = newProp;
    }
};

modiProp(emp_data, 2, "Kavita");
console.log(emp_data);

Output

[
  { emp_id: 1, emp_name: 'Mohan' },
  { emp_id: 2, emp_name: 'Kavita' },
  { emp_id: 3, emp_name: 'Amit' }
]

The modifyProperty function finds the employee with the given emp_id in the emp_data array and updates their emp_name to the new value.

Using Array.reduce() Method

The Javascript arr.reduce() method in JavaScript is used to reduce the array to a single value and executes a provided function for each value of the array (from left to right)
The return value of the function is stored in an accumulator.

const arr = [
  { id: 1, name: 'Riya' },
  { id: 2, name: 'Raha' },
  { id: 3, name: 'Rasha' }
];

const tar_Id = 2;
const up_Name = 'Geek';

const modiArr = arr.reduce((acc, obj) => {
  if (obj.id === tar_Id) {
  
// Clone the object and modify the property
    
 const modiObj = { ...obj, name: up_Name };
    acc.push(modiObj);
  } else {
  
// No modification needed, push the original object

    acc.push(obj);
  }
  return acc;
}, []);

console.log(modiArr);

Output

[
  { id: 1, name: 'Riya' },
  { id: 2, name: 'Geek' },
  { id: 3, name: 'Rasha' }
]

The code uses reduce to create a new array modiArr.
It checks if an object’s id matches tar_Id (2). If it does, it clones the object and updates its name to up_Name (“Geek”).
Otherwise, the original object is added to the new array.

Using Array.filter() and Array.concat() Methods

Using Array.filter() to create a new array excluding the object that needs modification and then using Array.concat() to add the modified object back to the array.

let emp_data = [
    {
        emp_id: 1,
        emp_name: "Aman",
    },
    {
        emp_id: 2,
        emp_name: "Saumya",
    },
    {
        emp_id: 3,
        emp_name: "Siya",
    },
];

const modiProp = (arr, targetId, newProperty) => {
    // Find the object that needs to be modified
    const targetObj = arr.find(obj => obj.emp_id === targetId);
    
    // If object is found, modify the property
    if (targetObj) {
        const modifiedObj = { ...targetObj, emp_name: newProperty };
        
        // Filter out the original object and concatenate the modified object
        return arr.filter(obj => obj.emp_id !== targetId).concat(modifiedObj);
    }
    return arr;
};

const res= modiProp(emp_data, 2, "Nikhil");
console.log("Updated Data: ");
console.log(res);

Output

Updated Data: 
[
  { emp_id: 1, emp_name: 'Aman' },
  { emp_id: 3, emp_name: 'Siya' },
  { emp_id: 2, emp_name: 'Nikhil' }
]

The modifyProperty function updates the emp_name of the employee with the given emp_id (targetId).
It finds the target object, modifies the emp_name, and returns a new array with the updated object, keeping the rest unchanged.

How to compare Arrays of Objects in JavaScript?

amansingla

Improve

Article Tags :

Similar Reads

How to get dynamic access to an object property in JavaScript ?

In JavaScript, an object is a collection of properties, where each property consists of a key-value pair. Objects are a fundamental data type in JavaScript. You can create an object in JavaScript in the following ways: By using the object literal notation, which is a comma-separated list of key-valu

How to Remove an Entry by Key in JavaScript Object?

In JavaScript, objects store data in the form of key-value pairs where the key may be any property of the object. In this article let us see how to remove key-value pairs a by given key in the object. Table of Content Using the delete operatorUsing the filter() methodUsing Destructuring and Object.a

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

Modifying an object's property in an array of objects in JavaScript involves accessing the specific object within the array and updating its property. Using the Array.map() methodUsing the map() method to create a new array by transforming each element of the original array based on a specified func

How to compare Arrays of Objects in JavaScript?

In JavaScript, comparing arrays of objects can be more complex than comparing primitive data types. We will discuss different ways to compare arrays of objects effectively, with detailed code examples and explanations. Syntax: Before going to detail the comparison techniques, let's first understand

How to create object properties in JavaScript ?

JavaScript is built on an object-oriented framework. An object is a collection of properties, where each property links a key to a value. These properties are not in any specific order. The value of a JavaScript property can be a method (function). Object properties can be updated, modified, added,

How to create an object with prototype in JavaScript ?

In this article, we will discuss object creation & prototypes, along with understanding the different ways for object creation & their implementation through the examples. Prototypes are the mechanism by which objects in JavaScript inherit features from another object. A prototype property i

How to declare object with computed property name in JavaScript ?

In this article, we learn how to declare an object with a computed property name. Before beginning this article, we have to know about the javascript objects. Computed Property Names: The ES6 computed property names feature allows us to compute an expression as a property name on an object. Javascri

How to add and remove properties from objects in JavaScript ?

We will try to understand how to add properties to an object and how to add or remove properties from an object in JavaScript. Before we go and see the addition and removal of properties from an object let us first understand the basics of an object in JavaScript. Object: An object in JavaScript is

How to check if a value is object-like in JavaScript ?

In JavaScript, objects are a collection of related data. It is also a container for name-value pairs. In JavaScript, we can check the type of value in many ways. Basically, we check if a value is object-like using typeof, instanceof, constructor, and Object.prototype.toString.call(k). All of the ope

JavaScript - Convert Two-Dimensional Array Into an Object

Here are the different methods to convert the two-dimensional array into an object in JavaScript. 1. Using a for LoopThe simplest way to convert a two-dimensional array into an object is by iterating through the array using a for loop and assigning key-value pairs. [GFGTABS] JavaScript const a = [[