How to compare Arrays of Objects in JavaScript ?

In this article, we will try to understand how we may compare Arrays of Objects in JavaScript using certain techniques via some coding examples along with their theoretical explanations.

Let us first analyze the syntax by which we may declare an array of objects in JavaScript, which is shown below:

Syntax: Following syntax, we may use in order to declare an array with multiple objects:

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

Now after analyzing the above-shown syntax, let’s see a quick example that 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 that contains multiple properties (or keys) along with their values, and then we will try to print them in a different manner.

Javascript

let employees_details = [
    {
        employee_id: 1,
        employee_name: "Aman",
        employee_age: 22,
    },
    {
        employee_id: 2,
        employee_name: "Ramesh",
        employee_age: 26,
    },
    {
        employee_id: 3,
        employee_name: "Suresh",
        employee_age: 33,
    },
];

console.log(
    "Complete Array of Objects is as shown below: ");
console.log(employees_details);

console.log(
    "\nEmployees Names and their respective ages are as follows: ");
employees_details.forEach((element) => {
    console.log(element.employee_name + " : " + element.employee_age);
});

Output:

Complete Array of Objects is as shown below: 
[
  { employee_id: 1, employee_name: 'Aman', employee_age: 22 },
  { employee_id: 2, employee_name: 'Ramesh', employee_age: 26 },
  { employee_id: 3, employee_name: 'Suresh', employee_age: 33 }
]

Employees Names and their respective ages are as follows: 
Aman : 22
Ramesh : 26
Suresh : 33

Now let us have a look over the following set of examples that will help us to understand our main task of comparing two arrays of objects.

Example 2:

• In this example, we will create two arrays of objects (here they both have different numbers of objects) and several objects containing multiple key-value pairs. 
• Then we will create a method that will solely be responsible for comparing two arrays of objects one after the other.
• Inside that method firstly we will check the length or size of both of the previously declared arrays of objects and then further conditions will be evaluated only after it. 
• Then after checking their lengths, we will use every() method in order to check the presence of all the elements of the first array of objects (or objects of the first array of objects) having some match in the second array of objects using some() method as well. 
• Then at last we will return the value (true or false) as an output using the console.log() method.

Javascript

let mechanical_students_details = [
    {
        student_id: 1,
        student_name: "Ramesh",
        student_age: 22,
    },
    {
        student_id: 2,
        student_name: "Suresh",
        student_age: 26,
    },
];

let cse_students_details = [
    {
        student_id: 1,
        student_name: "Aman",
        student_age: 23,
    },
    {
        student_id: 2,
        student_name: "Chaitanya",
        student_age: 24,
    },
    {
        student_id: 3,
        student_name: "Dharmendra",
        student_age: 21,
    },
];

let compareTwoArrayOfObjects = (
    first_array_of_objects,
    second_array_of_objects
) => {
    return (
        first_array_of_objects.length === second_array_of_objects.length &&
        first_array_of_objects.every((element_1) =>
            second_array_of_objects.some(
                (element_2) =>
                    element_1.student_name === element_2.student_name &&
                    element_1.student_age === element_2.student_age
            )
        )
    );
};

console.log(
    "Are these passed in array of objects equal? : " +
    compareTwoArrayOfObjects(mechanical_students_details, cse_students_details)
);

Output:

Are these passed in array of objects equal? : false

Example 3:

• In this example, we will again use the same previously created two arrays of objects but here we will change our approach or we may simply avoid doing what we have done previously. 
• Instead of manually checking or comparing each and every property as well as its value in both of the arrays containing multiple objects, we will here use Object.keys() method. 
• This method will take into consideration all the keys of the first array of objects and then again using some() method of an array we will check the match between both of the object’s properties and their values and then again using the console.log() method we will return the value so obtained (either true or false).

Javascript

let mechanical_students_details = [
    {
        student_id: 1,
        student_name: "Ramesh",
        student_age: 22,
    },
    {
        student_id: 2,
        student_name: "Suresh",
        student_age: 26,
    },
];

let cse_students_details = [
    {
        student_id: 1,
        student_name: "Aman",
        student_age: 23,
    },
    {
        student_id: 2,
        student_name: "Chaitanya",
        student_age: 24,
    },
    {
        student_id: 3,
        student_name: "Dharmendra",
        student_age: 21,
    },
];

let compareTwoArrayOfObjects = (
    first_array_of_objects,
    second_array_of_objects
) => {
    return (
        first_array_of_objects.length === second_array_of_objects.length &&
        first_array_of_objects.every((element_1) =>
            second_array_of_objects.some((element_2) =>
                Object.keys(element_1).every((key) => element_1[key] === element_2[key])
            )
        )
    );
};

console.log(
    "Are these passed in array of objects equal? : " +
    compareTwoArrayOfObjects(mechanical_students_details, cse_students_details)
);

Output:

Are these passed in array of objects equal? : false