Get the property of the difference between two objects in JavaScript

When working with JavaScript objects, you often need to compare them and identify which properties have different values. This is useful for tracking changes, validation, or debugging purposes.

Problem Overview

Given two objects with similar key-value pairs, we need to write a function that finds the first key with different values between the objects. If all values match, the function should return -1.

Here are sample objects to demonstrate the concept:

const obj1 = {
    name: 'Rahul Sharma',
    id: '12342fe4554ggf',
    isEmployed: true,
    age: 45,
    salary: 190000,
    job: 'Full Stack Developer',
    employedSince: 2005
};

const obj2 = {
    name: 'Rahul Sharma',
    id: '12342fe4554ggf',
    isEmployed: true,
    age: 45,
    salary: 19000,  // Different value
    job: 'Full Stack Developer',
    employedSince: 2005
};

console.log("Object 1 salary:", obj1.salary);
console.log("Object 2 salary:", obj2.salary);

Object 1 salary: 190000
Object 2 salary: 19000

Using Object.keys() with forEach()

The approach iterates through the first object's keys, comparing values with the second object. When a difference is found, it returns that key immediately:

const obj1 = {
    name: 'Rahul Sharma',
    id: '12342fe4554ggf',
    isEmployed: true,
    age: 45,
    salary: 190000,
    job: 'Full Stack Developer',
    employedSince: 2005
};

const obj2 = {
    name: 'Rahul Sharma',
    id: '12342fe4554ggf',
    isEmployed: true,
    age: 45,
    salary: 19000,
    job: 'Full Stack Developer',
    employedSince: 2005
};

const findDifference = (obj1, obj2) => {
    let keyFound = false;
    Object.keys(obj1).forEach(key => {
        if (obj1[key] !== obj2[key] && !keyFound) {
            keyFound = key;
        }
    });
    return keyFound || -1;
};

console.log("First different property:", findDifference(obj1, obj2));

First different property: salary

Using for...in Loop (Alternative Approach)

A more straightforward approach using a for...in loop that can return immediately when a difference is found:

const findDifferenceWithLoop = (obj1, obj2) => {
    for (let key in obj1) {
        if (obj1[key] !== obj2[key]) {
            return key;
        }
    }
    return -1;
};

// Test with different objects
const objA = { a: 1, b: 2, c: 3 };
const objB = { a: 1, b: 5, c: 3 };
const objC = { a: 1, b: 2, c: 3 };

console.log("Difference between objA and objB:", findDifferenceWithLoop(objA, objB));
console.log("Difference between objA and objC:", findDifferenceWithLoop(objA, objC));

Difference between objA and objB: b
Difference between objA and objC: -1

Handling Edge Cases

Consider cases where properties might not exist in both objects:

const findDifferenceComplete = (obj1, obj2) => {
    // Check all keys from both objects
    const allKeys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]);
    
    for (let key of allKeys) {
        if (obj1[key] !== obj2[key]) {
            return key;
        }
    }
    return -1;
};

const obj1 = { name: 'John', age: 30 };
const obj2 = { name: 'John', city: 'New York' };  // Missing 'age', has 'city'

console.log("First difference:", findDifferenceComplete(obj1, obj2));

First difference: age

Conclusion

Finding property differences between objects is essential for comparison operations. The for...in loop approach is more efficient as it can return immediately upon finding a difference, while Object.keys() with forEach() requires a flag variable to track the result.