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: "[e-mail]" };
const currentForm = { name: "John", email: "[e-mail]" };
console.log(getObjectDiff(originalForm, currentForm));
// Output: { email: { oldValue: "[e-mail]", newValue: "[e-mail]" } }

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:

	/**
	* Compares two objects and returns the differences, or null if they're the same
	* @param {Object} original - Original form data
	* @param {Object} current - Current form data
	* @returns {Object|null} Object containing only the changed fields, or null if no changes
	*/
	function getObjectDiff(original, current) {
	const changes = {};
	for (const [key, value] of Object.entries(current)) {
	// Handle case where original doesn't have the key
	if (!(key in original)) {
	changes[key] = {
	oldValue: undefined,
	newValue: value
	};
	continue;
	}
	const originalValue = original[key];
	const currentValue = value;
	if (
	originalValue !== currentValue &&
	String(originalValue) !== String(currentValue) &&
	JSON.stringify(originalValue) !== JSON.stringify(currentValue)
	) {
	changes[key] = {
	old: originalValue,
	new: currentValue
	};
	}
	}
	// Check for keys that exist in original but not in current
	for (const key of Object.keys(original)) {
	if (!(key in current)) {
	changes[key] = {
	old: original[key],
	new: undefined
	};
	}
	}
	// Return null if no changes were found
	return Object.keys(changes).length === 0 ? null : changes;
	}
	function deepObjectDiff(original, current) {
	if (original === current) return null;
	// Handle non-object types (including null)
	if (
	typeof original !== 'object' ||
	typeof current !== 'object' ||
	original === null ||
	current === null
	) {
	return {
	oldValue: original,
	newValue: current
	};
	}
	// Handle arrays
	if (Array.isArray(original) && Array.isArray(current)) {
	if (original.length !== current.length) {
	return {
	oldValue: original,
	newValue: current
	};
	}
	const arrayDiffs = {};
	let hasChanges = false;
	for (let i = 0; i < original.length; i++) {
	const diff = deepObjectDiff(original[i], current[i]);
	if (diff !== null) {
	arrayDiffs[i] = diff;
	hasChanges = true;
	}
	}
	return hasChanges ? arrayDiffs : null;
	}
	const changes = {};
	let hasChanges = false;
	// Check for changes in current object
	for (const key of Object.keys(current)) {
	if (!(key in original)) {
	changes[key] = {
	oldValue: undefined,
	newValue: current[key]
	};
	hasChanges = true;
	continue;
	}
	const diff = deepObjectDiff(original[key], current[key]);
	if (diff !== null) {
	changes[key] = diff;
	hasChanges = true;
	}
	}
	// Check for deleted keys
	for (const key of Object.keys(original)) {
	if (!(key in current)) {
	changes[key] = {
	oldValue: original[key],
	newValue: undefined
	};
	hasChanges = true;
	}
	}
	return hasChanges ? changes : null;
	}
	export {getObjectDiff, deepObjectDiff};

view raw objectDiff.js hosted with ❤ by GitHub

	import { getObjectDiff, deepObjectDiff } from './objectDiff.js';
	// Test Cases
	console.log("Test 1: Identical objects");
	console.log(getObjectDiff(
	{ name: "John", age: 30 },
	{ name: "John", age: 30 }
	));
	// Output: null
	console.log("Test 2: Different objects");
	console.log(getObjectDiff(
	{ name: "John", age: 30 },
	{ name: "Jane", age: 30 }
	));
	// Output: { name: { oldValue: "John", newValue: "Jane" } }
	console.log("Test 3: Nested objects");
	const original = {
	name: "John",
	age: 30,
	address: {
	street: "123 Main St",
	city: "Boston"
	},
	hobbies: ["reading", { type: "sports", name: "basketball" }]
	};
	const current = {
	name: "John",
	age: 30,
	address: {
	street: "123 Main St",
	city: "New York" // Changed city
	},
	hobbies: ["reading", { type: "sports", name: "football" }] // Changed sport
	};
	console.log("Shallow comparison result:", getObjectDiff(original, current));
	// const shallowOutput = {
	// address: {
	// oldValue: {
	// street: "123 Main St",
	// city: "Boston"
	// },
	// newValue: {
	// street: "123 Main St",
	// city: "New York"
	// }
	// },
	// hobbies: {
	// oldValue: ["reading", { type: "sports", name: "basketball" }],
	// newValue: ["reading", { type: "sports", name: "football" }]
	// }
	// }
	console.log("Deep comparison result:", deepObjectDiff(original, current));
	// const deepOutput = {
	// address: {
	// city: {
	// oldValue: "Boston",
	// newValue: "New York"
	// }
	// },
	// hobbies: {
	// "1": {
	// name: {
	// oldValue: "basketball",
	// newValue: "football"
	// }
	// }
	// }
	// }

view raw test.js hosted with ❤ by GitHub