How to Compare (diff) two Objects

Object Comparison in JavaScript

Object comparison in JavaScript is deceptively complex. While comparing primitive values like numbers and strings is straightforward, comparing objects can lead to unexpected results. Let's explore different approaches to object comparison and build a robust solution for detecting changes between objects.

The Pitfalls of Direct Comparison

When developers first encounter object comparison in JavaScript, they often try something like this:

const user1 = { name: "John", age: 30 };
const user2 = { name: "John", age: 30 };

console.log(user1 === user2); // false

Surprisingly, this returns false even though both objects have identical content. This happens because JavaScript compares object references, not their values. Both objects point to different locations in memory.

Simple Comparison Approaches

1. JSON.stringify

A quick way to compare objects is using JSON.stringify:

const areEqual = (obj1, obj2) => 
  JSON.stringify(obj1) === JSON.stringify(obj2);

console.log(areEqual(user1, user2)); // true

While this works for simple cases, it has limitations:

• Doesn't handle functions
• Order of properties matters
• Can't handle circular references
• Doesn't provide information about what's different

2. Building a Better Object Diff

Let's create a more sophisticated solution that not only detects differences but also tells us what changed:

function getObjectDiff(original, current) {
  const changes = {};

  // Check current object's properties
  for (const [key, value] of Object.entries(current)) {
    if (!(key in original)) {
      changes[key] = {
        oldValue: undefined,
        newValue: value
      };
      continue;
    }

    const originalValue = original[key];
    const currentValue = value;

    // Handle different types of comparisons
    if (
      originalValue !== currentValue &&
      String(originalValue) !== String(currentValue) &&
      JSON.stringify(originalValue) !== JSON.stringify(currentValue)
    ) {
      changes[key] = {
        oldValue: originalValue,
        newValue: currentValue
      };
    }
  }

  // Check for removed properties
  for (const key of Object.keys(original)) {
    if (!(key in current)) {
      changes[key] = {
        oldValue: original[key],
        newValue: undefined
      };
    }
  }

  return Object.keys(changes).length === 0 ? null : changes;
}

This implementation:

• Returns null when objects are identical
• Handles type coercion (e.g., "30" vs 30)
• Detects added and removed properties
• Provides detailed change information

Real-World Applications

This type of object comparison is particularly useful for:

1. Form Change Tracking: Detect which fields changed in a form

const originalForm = { name: "John", email: "john@example.com" };
const currentForm = { name: "John", email: "john.doe@example.com" };
console.log(getObjectDiff(originalForm, currentForm));
// Output: { email: { oldValue: "john@example.com", newValue: "john.doe@example.com" } }

1. State Management: Track which parts of your application state changed
2. API Updates: Determine which fields to send in PATCH requests
3. Audit Logging: Record specific changes made to data

Edge Cases (where you might need to go the extra mile)

1. Nested Objects: Deep comparison vs shallow comparison
2. Arrays: Order sensitivity and reference comparison
3. Type Coercion: String vs Number comparisons
4. Special Values: undefined, null, NaN
5. Performance: Deep comparison can be expensive for large objects

PS: Here's a Github gist for a simple function to compare and get the difference between two objects:

The above is the detailed content of How to Compare (diff) two Objects. For more information, please follow other related articles on the PHP Chinese website!