Print Difference between Two Objects in JavaScript ?

Printing the difference between two objects in JavaScript involves comparing the properties of the two objects and identifying the discrepancies between them. This can include properties that exist in one object but not in the other, as well as properties with differing values.

These are the following ways:

Using for loop

This approach involves iterating over the properties of one object and checking if they exist or have different values in the other object. You can accomplish this by using a loop (such as for…in) to iterate through the properties of one object and compare them with the corresponding properties in the other object.

Example: The findDifference function compares two objects and returns an object representing their differences. It checks keys in both objects, noting variations in values. The output highlights discrepancies between the objects, including missing keys.

Javascript

function findDifference(obj1, obj2) {
    const diffKeys = [];
    for (const key in obj1) {
        if (!(key in obj2) ||
            obj1[key] !== obj2[key]) {
            diffKeys.push(key);
        }
    }
    for (const key in obj2) {
        if (!(key in obj1) ||
            obj1[key] !== obj2[key]) {
            if (!diffKeys.includes(key)) {
                diffKeys.push(key);
            }
        }
    }
    return diffKeys;
}

const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { a: 1, b: 4, d: 5 };

console.log(findDifference(obj1, obj2));

Output

[ 'b', 'c', 'd' ]

Using Object.entries() and Array.prototype.reduce()

ES6 introduced several powerful features for working with objects and arrays, such as Object.entries() and Array.prototype.reduce(). Using these features, you can iterate over the properties of an object and compare them with another object.

Example: The Function takes two objects (obj1 and obj2) as arguments and returns an object representing the differences between them. It iterates through the keys of both objects, comparing their values. If a key exists in one object but not the other, or if the values of the same key differ, it records the difference. The final result is an object containing the discrepancies found in both objects.

Javascript

function findDifference(obj1, obj2) {
    const diffKeys = Object.keys(obj1)
        .reduce((acc, key) => {
            if (!(key in obj2) ||
                obj1[key] !== obj2[key]) {
                acc.push(key);
            }
            return acc;
        }, []);

    Object.keys(obj2).forEach(key => {
        if (!(key in obj1) ||
            obj1[key] !== obj2[key]) {
            if (!diffKeys.includes(key)) {
                diffKeys.push(key);
            }
        }
    });

    return diffKeys;
}

const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { a: 1, b: 4, d: 5 };

console.log(findDifference(obj1, obj2));

Output

[ 'b', 'c', 'd' ]